初始化代码
This commit is contained in:
392
uniapp/uni-app/components/jyf-Parser/trees.vue
Normal file
392
uniapp/uni-app/components/jyf-Parser/trees.vue
Normal file
@@ -0,0 +1,392 @@
|
||||
<!--
|
||||
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;">
|
||||
<block v-for="(item, index) in nodes" v-bind:key="index">
|
||||
<!--#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" :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="''+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>
|
||||
Reference in New Issue
Block a user