440 lines
12 KiB
Vue
440 lines
12 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;max-width: 100%;">
|
||
<block v-for="(item, index) in nodes" v-bind:key="index">
|
||
<!--图片-->
|
||
<!--#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, imgLoad)' :data-attrs="item.attrs" @tap="imgtap" @longpress="imglongtap" />
|
||
<!--#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="imgtap" @longpress="imglongtap" />
|
||
<!--#endif-->
|
||
<!--文本-->
|
||
<!--#ifdef MP-WEIXIN || MP-QQ || APP-PLUS-->
|
||
<text v-else-if="item.type=='text'&&!item.decode" decode>{{item.text}}</text>
|
||
<rich-text v-else-if="item.type=='text'" style="display:inline-block" :nodes="[item]"></rich-text>
|
||
<!--#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>
|
||
<!--视频-->
|
||
<view v-else-if="item.name=='video'">
|
||
<!--#ifdef APP-PLUS-->
|
||
<view v-if="(!loadVideo||item.lazyLoad)&&(!controls[item.attrs.id]||!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" :poster="item.attrs.poster" :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="play" @error="videoError" />
|
||
</view>
|
||
<!--音频-->
|
||
<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="linkpress">
|
||
<trees :nodes="item.children" />
|
||
</view>
|
||
<!--广告-->
|
||
<!--#ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO-->
|
||
<ad v-else-if="item.name=='ad'" :unit-id="item.attrs['unit-id']" :class="item.attrs.class||''" :style="item.attrs.style||''"
|
||
@error="adError" />
|
||
<!--#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" />
|
||
<!--#endif-->
|
||
<!--#ifdef APP-PLUS-->
|
||
<ad v-else-if="item.name=='ad'" :adpid="item.attrs.adpid" :class="item.attrs.class||''" :style="item.attrs.style||''"
|
||
@error="adError" />
|
||
<!--#endif-->
|
||
<!--列表-->
|
||
<view v-else-if="item.name=='li'" :class="(item.attrs.class||'')+' _li'" :style="(item.attrs.style||'')+';display:flex'">
|
||
<view v-if="item.type=='ol'" class="_ol-before">{{item.num}}</view>
|
||
<view v-else class="_ul-before">
|
||
<view v-if="item.floor%3==0" class="_ul-type1">█</view>
|
||
<view v-else-if="item.floor%3==2" class="_ul-type2" />
|
||
<view v-else class="_ul-type1" style="border-radius:50%">█</view>
|
||
</view>
|
||
<!--#ifdef MP-ALIPAY-->
|
||
<view>
|
||
<trees :nodes="item.children" />
|
||
</view>
|
||
<!--#endif-->
|
||
<!--#ifndef MP-ALIPAY-->
|
||
<trees class="_node" :nodes="item.children" :loadVideo="loadVideo" style="display:block" />
|
||
<!--#endif-->
|
||
</view>
|
||
<!--富文本-->
|
||
<!--#ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY || APP-PLUS-->
|
||
<rich-text v-else-if="!(item.c||inlineTags[item.name]||item.continue)" :id="item.attrs.id" :class="'__'+item.name"
|
||
:style="''+handler.getStyle(item.attrs.style, 'block')" :nodes="handler.setStyle(item)" />
|
||
<!--#endif-->
|
||
<!--#ifdef MP-BAIDU || MP-TOUTIAO-->
|
||
<rich-text v-else-if="!(item.c||item.continue)" :id="item.attrs.id" :style="item.attrs?item.attrs.containStyle:''"
|
||
:nodes="[item]" />
|
||
<!--#endif-->
|
||
<!--#ifdef MP-ALIPAY-->
|
||
<view v-else :id="item.attrs.id" :class="'_'+item.name+' '+(item.attrs.class||'')" :style="item.attrs.style||''">
|
||
<trees :nodes="item.children" />
|
||
</view>
|
||
<!--#endif-->
|
||
<!--#ifndef MP-ALIPAY-->
|
||
<trees v-else :class="item.attrs.id+' _'+item.name+' '+(item.attrs.class||'')" :style="item.attrs.style||''" :nodes="item.children"
|
||
: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>
|
||
const inlineTags = require("./config.js").inlineTags;
|
||
import trees from "./trees"
|
||
export default {
|
||
components: {
|
||
trees
|
||
},
|
||
name: 'trees',
|
||
data() {
|
||
return {
|
||
controls: {},
|
||
// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS
|
||
imgLoad: false,
|
||
// #endif
|
||
// #ifndef MP-BAIDU || MP-TOUTIAO
|
||
inlineTags
|
||
// #endif
|
||
}
|
||
},
|
||
props: {
|
||
nodes: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
// #ifdef APP-PLUS
|
||
loadVideo: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
// #endif
|
||
},
|
||
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
|
||
play(e) {
|
||
if ((this._top.videoContexts || []).length > 1 && this._top.autopause) {
|
||
for (var i = this._top.videoContexts.length; i--;) {
|
||
if (this._top.videoContexts[i].id != e.currentTarget.id)
|
||
this._top.videoContexts[i].pause();
|
||
}
|
||
}
|
||
},
|
||
// #endif
|
||
imgtap(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) {
|
||
var urls = this._top.imgList || [],
|
||
current = urls[attrs.i] ? parseInt(attrs.i) : (urls = [attrs.src], 0);
|
||
uni.previewImage({
|
||
current,
|
||
urls
|
||
})
|
||
}
|
||
}
|
||
},
|
||
imglongtap(e) {
|
||
this._top.$emit('imglongtap', {
|
||
id: e.currentTarget.id,
|
||
src: e.currentTarget.dataset.attrs.src
|
||
})
|
||
},
|
||
linkpress(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) {
|
||
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) {
|
||
if (target.dataset.source.length <= 1) return false;
|
||
if (!this.controls[target.id]) {
|
||
this.$set(this.controls, target.id, {
|
||
index: 1
|
||
})
|
||
return true;
|
||
} else if (this.controls[target.id] && this.controls[target.id].index < target.dataset.source.length) {
|
||
this.$set(this.controls[target.id], "index", this.controls[target.id].index + 1);
|
||
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-WEIXIN || APP-PLUS */
|
||
:host {
|
||
display: inherit;
|
||
float: inherit;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
._b,
|
||
._strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
._big {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
._small {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
._blockquote,
|
||
._div,
|
||
._p,
|
||
._ol,
|
||
._ul,
|
||
._li {
|
||
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;
|
||
}
|
||
|
||
._ol-before {
|
||
width: 36px;
|
||
text-align: right;
|
||
margin-right: 5px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
._ul-before {
|
||
margin-left: 23px;
|
||
margin-right: 12px;
|
||
line-height: normal;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
._ul-type1 {
|
||
width: 0.3em;
|
||
height: 0.3em;
|
||
line-height: 0.3em;
|
||
color: inherit;
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
}
|
||
|
||
._ul-type2 {
|
||
width: 0.23em;
|
||
height: 0.23em;
|
||
background-color: transparent;
|
||
border: 0.05em solid black;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
|
||
._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>
|