408 lines
10 KiB
Vue
408 lines
10 KiB
Vue
<!--
|
||
trees 递归显示组件
|
||
github地址：https://github.com/jin-yufeng/Parser
|
||
文档地址：https://jin-yufeng.github.io/Parser
|
||
插件市场：https://ext.dcloud.net.cn/plugin?id=805
|
||
author：JinYufeng
|
||
-->
|
||
<template>
|
||
<view style="display: inherit; white-space: inherit;word-break:normal">
|
||
<block v-for="(item, index) in nodes" v-bind:key="index">
|
||
<!-- {{item.name}} {{item}} -->
|
||
<!--#ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY || APP-PLUS-->
|
||
<block v-if="handler.notContinue(item)">
|
||
<!--#endif-->
|
||
<!--#ifdef MP-BAIDU || MP-TOUTIAO-->
|
||
<block v-if="!item.c">
|
||
<!--#endif-->
|
||
<!--图片-->
|
||
<!--#ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY || APP-PLUS-->
|
||
<rich-text v-if="item.name=='img'" :id="item.attrs.id" class="img"
|
||
:style="'text-indent:0;'+handler.getStyle(item.attrs.style, 'inline-block')"
|
||
:nodes='handler.setImgStyle(item, imgMode, imgLoad)' :data-attrs="item.attrs"
|
||
@tap='previewEvent' />
|
||
<!--#endif-->
|
||
<!--#ifdef MP-BAIDU || MP-TOUTIAO-->
|
||
<rich-text v-if="item.name=='img'" :id="item.attrs.id"
|
||
:style="'text-indent:0;'+item.attrs.containStyle" :nodes='[item]' :data-attrs="item.attrs"
|
||
@tap='previewEvent' />
|
||
<!--#endif-->
|
||
<!--文本-->
|
||
<!--#ifdef MP-WEIXIN || MP-QQ || APP-PLUS-->
|
||
<block v-else-if="item.type=='text'">
|
||
<text v-if="!item.decode" decode>{{item.text}}</text>
|
||
<rich-text v-else style="display:inline-block;word-break:normal" :nodes="[item]"></rich-text>
|
||
</block>
|
||
<!--#endif-->
|
||
<!--#ifdef MP-ALIPAY-->
|
||
<text v-else-if="item.type=='text'" decode>{{item.text}}</text>
|
||
<!--#endif-->
|
||
<text v-else-if="item.name=='br'">\n</text>
|
||
<!--视频-->
|
||
<block v-else-if="item.name=='video'">
|
||
<!--#ifdef APP-PLUS-->
|
||
<view v-if="(!loadVideo||item.lazyLoad)&&!controls[item.attrs.id].play" :id="item.attrs.id"
|
||
:class="'_video '+(item.attrs.class||'')" :style="item.attrs.style||''" @tap="_loadVideo" />
|
||
<!--#endif-->
|
||
<!--#ifndef APP-PLUS-->
|
||
<view v-if="item.lazyLoad&&!controls[item.attrs.id].play" :id="item.attrs.id"
|
||
:class="'_video '+(item.attrs.class||'')" :style="item.attrs.style||''" @tap="_loadVideo" />
|
||
<!--#endif-->
|
||
<video v-else
|
||
:src="controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index] : item.attrs.src"
|
||
:id="item.attrs.id" :loop="item.attrs.loop" :controls="item.attrs.controls"
|
||
:autoplay="item.attrs.autoplay||(controls[item.attrs.id]&&controls[item.attrs.id].play)"
|
||
:unit-id="item.attrs['unit-id']" :class="item.attrs.class" :muted="item.attrs.muted"
|
||
:style="item.attrs.style||''" :data-source="item.attrs.source" @play="playEvent"
|
||
@error="videoError" />
|
||
</block>
|
||
<!-- iframe 【create_by_xx】-->
|
||
<block v-else-if="item.name=='iframe'">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<!-- 腾讯视频 -->
|
||
<txv-video :vid="item.attrs.src" :playerid="item.attrs.src" width="100%" height="100%"
|
||
:controls="true" :autoplay="false" :isHiddenStop="true"
|
||
v-if="item.attrs.lbType=='vid' || item.attrs.lbtype=='vid'">
|
||
</txv-video>
|
||
<!-- #endif -->
|
||
</block>
|
||
<!--音频-->
|
||
<audio v-else-if="item.name=='audio'"
|
||
:src="controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index] : item.attrs.src"
|
||
:id="item.attrs.id" :loop="item.attrs.loop" :controls="item.attrs.controls"
|
||
:poster="item.attrs.poster" :name="item.attrs.name" :author="item.attrs.author"
|
||
:class="item.attrs.class" :style="item.attrs.style||''" :data-source="item.attrs.source"
|
||
@error="audioError" />
|
||
<!--链接-->
|
||
<view v-else-if="item.name=='a'" :class="'_a '+(item.attrs.class||'')" :style="item.attrs.style||''"
|
||
:data-attrs="item.attrs" hover-class="navigator-hover" :hover-start-time="25"
|
||
:hover-stay-time="300" @tap="tapEvent">
|
||
<trees :nodes="item.children" :imgMode="imgMode" />
|
||
</view>
|
||
<!--广告-->
|
||
<!--#ifdef MP-WEIXIN || MP-QQ-->
|
||
<ad v-else-if="item.name=='ad'" :unit-id="item.attrs['unit-id']" :class="item.attrs.class||''"
|
||
:style="item.attrs.style||''" @error="adError"></ad>
|
||
<!--#endif-->
|
||
<!--#ifdef MP-BAIDU-->
|
||
<ad v-else-if="item.name=='ad'" :appid="item.attrs.appid" :apid="item.attrs.apid"
|
||
:type="item.attrs.type" :class="item.attrs.class||''" :style="item.attrs.style"
|
||
@error="adError"></ad>
|
||
<!--#endif-->
|
||
<!--富文本-->
|
||
<!--#ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY || APP-PLUS-->
|
||
<rich-text v-else :id="item.attrs.id" :class="'__'+item.name"
|
||
:style="'word-break:normal;'+handler.getStyle(item.attrs.style, 'block')" :nodes="handler.setStyle(item)" />
|
||
<!--#endif-->
|
||
<!--#ifdef MP-BAIDU || MP-TOUTIAO-->
|
||
<rich-text v-else :id="item.attrs.id" :style="item.attrs?item.attrs.containStyle:''"
|
||
:nodes="[item]" />
|
||
<!--#endif-->
|
||
</block>
|
||
<!--#ifdef MP-ALIPAY-->
|
||
<view v-else :id="item.attrs.id" :class="'_'+item.name+' '+(item.attrs.class||'')"
|
||
:style="item.attrs.style||''">
|
||
<trees :nodes="item.children" :imgMode="imgMode" />
|
||
</view>
|
||
<!--#endif-->
|
||
<!--#ifndef MP-ALIPAY-->
|
||
<trees v-else :class="item.attrs.id+' _'+item.name+' '+(item.attrs.class||'')"
|
||
:style="item.attrs.style||''" :nodes="item.children" :imgMode="imgMode" :loadVideo="loadVideo" />
|
||
<!--#endif-->
|
||
</block>
|
||
</view>
|
||
</template>
|
||
<script module="handler" lang="wxs" src="./handler.wxs"></script>
|
||
<script module="handler" lang="sjs" src="./handler.sjs"></script>
|
||
<script>
|
||
import trees from "./trees"
|
||
export default {
|
||
components: {
|
||
trees
|
||
},
|
||
name: 'trees',
|
||
data() {
|
||
return {
|
||
controls: {},
|
||
// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS
|
||
imgLoad: true
|
||
// #endif
|
||
}
|
||
},
|
||
props: {
|
||
nodes: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
// #ifdef APP-PLUS
|
||
loadVideo: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// #endif
|
||
imgMode: {
|
||
type: String,
|
||
default: "default"
|
||
}
|
||
},
|
||
mounted() {
|
||
// 获取顶层组件
|
||
this._top = this.$parent;
|
||
while (this._top.$options.name != 'parser') {
|
||
if (this._top._top) {
|
||
this._top = this._top._top;
|
||
break;
|
||
}
|
||
this._top = this._top.$parent;
|
||
}
|
||
},
|
||
// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS
|
||
beforeDestroy() {
|
||
if (this._observer)
|
||
this._observer.disconnect();
|
||
},
|
||
// #endif
|
||
methods: {
|
||
// #ifndef MP-ALIPAY
|
||
playEvent(e) {
|
||
if ((this._top.videoContexts || []).length > 1 && this._top.autopause) {
|
||
for (var video of this._top.videoContexts) {
|
||
if (video.id == e.currentTarget.id) continue;
|
||
video.pause();
|
||
}
|
||
}
|
||
},
|
||
// #endif
|
||
previewEvent(e) {
|
||
var attrs = e.currentTarget.dataset.attrs;
|
||
if (!attrs.ignore) {
|
||
var preview = true;
|
||
this._top.$emit('imgtap', {
|
||
id: e.currentTarget.id,
|
||
src: attrs.src,
|
||
ignore: () => preview = false
|
||
})
|
||
if (preview && this._top.autopreview) {
|
||
var urls = this._top.imgList || [],
|
||
current = urls[attrs.i] ? attrs.i : (urls = [attrs.src], 0);
|
||
uni.previewImage({
|
||
current,
|
||
urls
|
||
})
|
||
}
|
||
}
|
||
},
|
||
tapEvent(e) {
|
||
var jump = true,
|
||
attrs = e.currentTarget.dataset.attrs;
|
||
attrs.ignore = () => jump = false;
|
||
this._top.$emit('linkpress', attrs);
|
||
if (jump) {
|
||
// #ifdef MP
|
||
if (attrs['app-id'] || attrs.appId) {
|
||
return uni.navigateToMiniProgram({
|
||
appId: attrs['app-id'] || attrs.appId,
|
||
path: attrs.path || ''
|
||
})
|
||
}
|
||
// #endif
|
||
if (attrs.href) {
|
||
if (attrs.href[0] == "#") {
|
||
if (this._top.useAnchor)
|
||
this._top.navigateTo({
|
||
id: attrs.href.substring(1)
|
||
})
|
||
} else if (attrs.href.indexOf("http") == 0 || attrs.href.indexOf("//") == 0) {
|
||
if (this._top.autocopy) {
|
||
uni.setClipboardData({
|
||
data: attrs.href,
|
||
success() {
|
||
uni.showToast({
|
||
title: '链接已复制'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
} else
|
||
uni.navigateTo({
|
||
url: attrs.href
|
||
})
|
||
}
|
||
}
|
||
},
|
||
triggerError(source, target, errMsg, errCode, context) {
|
||
this._top.$emit('error', {
|
||
source,
|
||
target,
|
||
errMsg,
|
||
errCode,
|
||
context
|
||
});
|
||
},
|
||
loadSource(target) {
|
||
// console.log(target)
|
||
var index = (this.controls[target.id] ? this.controls[target.id].index : 0) + 1;
|
||
if (index < target.dataset.source.length) {
|
||
this.$set(this.controls[target.id], "index", index);
|
||
return true;
|
||
}
|
||
return false;
|
||
},
|
||
adError(e) {
|
||
this.triggerError("ad", e.currentTarget, "", e.detail.errorCode);
|
||
},
|
||
videoError(e) {
|
||
if (!this.loadSource(e.currentTarget) && this._top)
|
||
this.triggerError("video", e.currentTarget, e.detail.errMsg, undefined, uni.createVideoContext(e
|
||
.currentTarget.id,
|
||
this));
|
||
},
|
||
audioError(e) {
|
||
if (!this.loadSource(e.currentTarget))
|
||
this.triggerError("audio", e.currentTarget, e.detail.errMsg);
|
||
},
|
||
_loadVideo(e) {
|
||
this.$set(this.controls, e.currentTarget.id, {
|
||
play: true,
|
||
index: 0
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* 可以在这里引入自定义的外部样式 */
|
||
|
||
/* 链接受到点击的hover-class，可自定义修改 */
|
||
.navigator-hover {
|
||
opacity: 0.7;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 以下内容不建议修改 */
|
||
/* #ifndef MP-BAIDU */
|
||
:host {
|
||
display: inherit;
|
||
float: inherit;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
._b,
|
||
._strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
._big {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
._small {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
._blockquote,
|
||
._div,
|
||
._p {
|
||
display: block;
|
||
}
|
||
|
||
._code {
|
||
font-family: monospace;
|
||
}
|
||
|
||
._del {
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
._em,
|
||
._i {
|
||
font-style: italic;
|
||
}
|
||
|
||
._h1 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
._h2 {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
._h3 {
|
||
font-size: 1.17em;
|
||
}
|
||
|
||
._h5 {
|
||
font-size: 0.67em;
|
||
}
|
||
|
||
._h1,
|
||
._h2,
|
||
._h3,
|
||
._h4,
|
||
._h5,
|
||
._h6 {
|
||
font-weight: bold;
|
||
}
|
||
|
||
._ins {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
._q::before {
|
||
content: '"';
|
||
}
|
||
|
||
._q::after {
|
||
content: '"';
|
||
}
|
||
|
||
._a,
|
||
._abbr,
|
||
._b,
|
||
._big,
|
||
._small,
|
||
._code,
|
||
._del,
|
||
._em,
|
||
._i,
|
||
._ins,
|
||
._label,
|
||
._q,
|
||
._span,
|
||
._strong {
|
||
display: inline;
|
||
}
|
||
|
||
/* #ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY */
|
||
.__sub,
|
||
.__sup,
|
||
.__bdo,
|
||
.__bdi,
|
||
.__ruby,
|
||
.__rt {
|
||
display: inline-block !important;
|
||
}
|
||
|
||
/* #endif */
|
||
._video {
|
||
background-color: black;
|
||
width: 300px;
|
||
height: 225px;
|
||
display: inline-block;
|
||
position: relative;
|
||
}
|
||
|
||
._video::after {
|
||
content: '';
|
||
border-width: 15px 0 15px 30px;
|
||
border-style: solid;
|
||
border-color: transparent transparent transparent white;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
margin: -15px 0 0 -15px;
|
||
}
|
||
</style>
|