123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501 |
- <template>
- <view :class="'interlayer '+(c||'')" :style="s">
- <block v-for="(n, i) in nodes" v-bind:key="i">
-
- <view v-if="n.name=='img'" :class="'_img '+n.attrs.class" :style="n.attrs.style" :data-attrs="n.attrs" @tap="imgtap">
- <rich-text v-if="ctrl[i]!=0" :nodes="[{attrs:{src:loading&&(ctrl[i]||0)<2?loading:(lazyLoad&&!ctrl[i]?placeholder:(ctrl[i]==3?errorImg:n.attrs.src||'')),alt:n.attrs.alt||'',width:n.attrs.width||'',style:'-webkit-touch-callout:none;max-width:100%;display:block'+(n.attrs.height?';height:'+n.attrs.height:'')},name:'img'}]" />
- <image class="_image" :src="lazyLoad&&!ctrl[i]?placeholder:n.attrs.src" :lazy-load="lazyLoad"
- :show-menu-by-longpress="!n.attrs.ignore" :data-i="i" :data-index="n.attrs.i" data-source="img" @load="loadImg"
- @error="error" />
- </view>
-
- <text v-else-if="n.type=='text'" decode>{{n.text}}</text>
-
- <text v-else-if="n.name=='br'">\n</text>
-
-
- <view v-else-if="((n.lazyLoad&&!n.attrs.autoplay)||(n.name=='video'&&!loadVideo))&&ctrl[i]==undefined" :id="n.attrs.id" :class="'_video '+(n.attrs.class||'')"
- :style="n.attrs.style" :data-i="i" @tap="_loadVideo" />
- <video v-else-if="n.name=='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||ctrl[i]==0"
- :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.attrs.source[ctrl[i]||0]"
- :unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" :data-i="i" data-source="video" @error="error" @play="play" />
-
- <audio v-else-if="n.name=='audio'" :ref="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author"
- :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster"
- :src="n.attrs.source[ctrl[i]||0]" :data-i="i" :data-id="n.attrs.id" data-source="audio"
- @error.native="error" @play.native="play" />
-
- <view v-else-if="n.name=='a'" :id="n.attrs.id" :class="'_a '+(n.attrs.class||'')" hover-class="_hover" :style="n.attrs.style"
- :data-attrs="n.attrs" @tap="linkpress">
- <trees class="_span" c="_span" :nodes="n.children" />
- </view>
-
-
-
- <view v-else-if="n.name=='li'" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:flex;flex-direction:row'">
- <view v-if="n.type=='ol'" class="_ol-bef">{{n.num}}</view>
- <view v-else class="_ul-bef">
- <view v-if="n.floor%3==0" class="_ul-p1">█</view>
- <view v-else-if="n.floor%3==2" class="_ul-p2" />
- <view v-else class="_ul-p1" style="border-radius:50%">█</view>
- </view>
- <trees class="_li" c="_li" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" />
- </view>
-
- <view v-else-if="n.name=='table'&&n.c" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:table'">
- <view v-for="(tbody, o) in n.children" v-bind:key="o" :class="tbody.attrs.class" :style="(tbody.attrs.style||'')+(tbody.name[0]=='t'?';display:table-'+(tbody.name=='tr'?'row':'row-group'):'')">
- <view v-for="(tr, p) in tbody.children" v-bind:key="p" :class="tr.attrs.class" :style="(tr.attrs.style||'')+(tr.name[0]=='t'?';display:table-'+(tr.name=='tr'?'row':'cell'):'')">
- <trees v-if="tr.name=='td'" :nodes="tr.children" />
- <trees v-else v-for="(td, q) in tr.children" v-bind:key="q" :class="td.attrs.class" :c="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')"
- :s="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')" :nodes="td.children" />
- </view>
- </view>
- </view>
-
- <iframe v-else-if="n.name=='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder"
- :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
- <embed v-else-if="n.name=='embed'" :style="n.attrs.style" :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
-
-
-
- <rich-text v-else-if="handler.use(n)" :id="n.attrs.id" :class="'_p __'+n.name" :nodes="[n]" />
-
-
- <rich-text v-else-if="!n.c" :id="n.attrs.id" :nodes="[n]" style="display:inline" />
-
- <trees v-else :class="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')" :c="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')"
- :style="n.attrs.style" :s="n.attrs.style" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" />
- </block>
- </view>
- </template>
- <script module="handler" lang="wxs" src="./handler.wxs"></script>
- <script>
- global.Parser = {};
- import trees from './trees'
- const errorImg = require('../libs/config.js').errorImg;
- export default {
- components: {
- trees
- },
- name: 'trees',
- data() {
- return {
- ctrl: [],
- placeholder: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="225"/>',
- errorImg,
- loadVideo: typeof plus == 'undefined',
-
- c: '',
- s: ''
-
- }
- },
- props: {
- nodes: Array,
- lazyLoad: Boolean,
- loading: String,
-
- c: String,
- s: String
-
- },
- mounted() {
- for (this.top = this.$parent; this.top.$options.name != 'parser'; this.top = this.top.$parent);
- this.init();
- },
-
- beforeDestroy() {
- this.observer && this.observer.disconnect();
- },
-
- methods: {
- init() {
- for (var i = this.nodes.length, n; n = this.nodes[--i];) {
- if (n.name == 'img') {
- this.top.imgList.setItem(n.attrs.i, n.attrs.src);
-
- if (this.lazyLoad && !this.observer) {
- this.observer = uni.createIntersectionObserver(this).relativeToViewport({
- top: 500,
- bottom: 500
- });
- setTimeout(() => {
- this.observer.observe('._img', res => {
- if (res.intersectionRatio) {
- for (var j = this.nodes.length; j--;)
- if (this.nodes[j].name == 'img')
- this.$set(this.ctrl, j, 1);
- this.observer.disconnect();
- }
- })
- }, 0)
- }
-
- } else if (n.name == 'video' || n.name == 'audio') {
- var ctx;
- if (n.name == 'video') {
- ctx = uni.createVideoContext(n.attrs.id
-
- , this
-
- );
- } else if (this.$refs[n.attrs.id])
- ctx = this.$refs[n.attrs.id][0];
- if (ctx) {
- ctx.id = n.attrs.id;
- this.top.videoContexts.push(ctx);
- }
- }
- }
-
-
- setTimeout(() => {
- this.loadVideo = true;
- }, 1000)
-
- },
- play(e) {
- var contexts = this.top.videoContexts;
- if (contexts.length > 1 && this.top.autopause)
- for (var i = contexts.length; i--;)
- if (contexts[i].id != e.currentTarget.dataset.id)
- contexts[i].pause();
- },
- imgtap(e) {
- var attrs = e.currentTarget.dataset.attrs;
- if (!attrs.ignore) {
- var preview = true,
- data = {
- id: e.target.id,
- src: attrs.src,
- ignore: () => preview = false
- };
- global.Parser.onImgtap && global.Parser.onImgtap(data);
- this.top.$emit('imgtap', data);
- if (preview) {
- var urls = this.top.imgList,
- current = urls[attrs.i] ? parseInt(attrs.i) : (urls = [attrs.src], 0);
- uni.previewImage({
- current,
- urls
- })
- }
- }
- },
- loadImg(e) {
- var i = e.currentTarget.dataset.i;
- if (this.lazyLoad && !this.ctrl[i]) {
-
- this.$set(this.ctrl, i, 0);
- this.$nextTick(function() {
-
-
- this.$set(this.ctrl, i, 1);
-
-
- })
-
- } else if (this.loading && this.ctrl[i] != 2) {
-
- this.$set(this.ctrl, i, 0);
- this.$nextTick(function() {
-
- this.$set(this.ctrl, i, 2);
-
- })
-
- }
- },
- linkpress(e) {
- var jump = true,
- attrs = e.currentTarget.dataset.attrs;
- attrs.ignore = () => jump = false;
- global.Parser.onLinkpress && global.Parser.onLinkpress(attrs);
- this.top.$emit('linkpress', attrs);
- if (jump) {
-
- if (attrs['app-id']) {
- return uni.navigateToMiniProgram({
- appId: attrs['app-id'],
- path: attrs.path
- })
- }
-
- 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) {
-
- plus.runtime.openWeb(attrs.href);
-
-
- uni.setClipboardData({
- data: attrs.href,
- success: () =>
- uni.showToast({
- title: '链接已复制'
- })
- })
-
- } else
- uni.navigateTo({
- url: attrs.href,
- fail() {
- uni.switchTab({
- url: attrs.href,
- })
- }
- })
- }
- }
- },
- error(e) {
- var target = e.currentTarget,
- source = target.dataset.source,
- i = target.dataset.i;
- if (source == 'video' || source == 'audio') {
-
- var index = this.ctrl[i] ? this.ctrl[i].i + 1 : 1;
- if (index < this.nodes[i].attrs.source.length)
- this.$set(this.ctrl, i, index);
- if (e.detail.__args__)
- e.detail = e.detail.__args__[0];
- } else if (errorImg && source == 'img') {
- this.top.imgList.setItem(target.dataset.index, errorImg);
- this.$set(this.ctrl, i, 3);
- }
- this.top && this.top.$emit('error', {
- source,
- target,
- errMsg: e.detail.errMsg
- });
- },
- _loadVideo(e) {
- this.$set(this.ctrl, e.target.dataset.i, 0);
- }
- }
- }
- </script>
- <style>
-
-
- ._a {
- display: inline;
- padding: 1.5px 0 1.5px 0;
- color: #366092;
- word-break: break-all;
- }
- ._hover {
- text-decoration: underline;
- opacity: 0.7;
- }
- ._img {
- display: inline-block;
- max-width: 100%;
- overflow: hidden;
- }
-
- :host {
- display: inline;
- }
-
-
- .interlayer {
- display: inherit;
- flex-direction: inherit;
- flex-wrap: inherit;
- align-content: inherit;
- align-items: inherit;
- justify-content: inherit;
- width: 100%;
- white-space: inherit;
- }
-
- ._b,
- ._strong {
- font-weight: bold;
- }
-
- ._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.83em;
- }
- ._h6 {
- font-size: 0.67em;
- }
- ._h1,
- ._h2,
- ._h3,
- ._h4,
- ._h5,
- ._h6 {
- display: block;
- font-weight: bold;
- }
- ._image {
- display: block;
- width: 100%;
- height: 360px;
- margin-top: -360px;
- opacity: 0;
- }
- ._ins {
- text-decoration: underline;
- }
- ._li {
- flex: 1;
- width: 0;
- }
- ._ol-bef {
- width: 36px;
- margin-right: 5px;
- text-align: right;
- }
- ._ul-bef {
- display: block;
- margin: 0 12px 0 23px;
- line-height: normal;
- }
- ._ol-bef,
- ._ul-bef {
- flex: none;
- user-select: none;
- }
- ._ul-p1 {
- display: inline-block;
- width: 0.3em;
- height: 0.3em;
- overflow: hidden;
- line-height: 0.3em;
- }
- ._ul-p2 {
- display: inline-block;
- width: 0.23em;
- height: 0.23em;
- border: 0.05em solid black;
- border-radius: 50%;
- }
- ._q::before {
- content: '"';
- }
- ._q::after {
- content: '"';
- }
- ._sub {
- font-size: smaller;
- vertical-align: sub;
- }
- ._sup {
- font-size: smaller;
- vertical-align: super;
- }
-
- ._abbr,
- ._b,
- ._code,
- ._del,
- ._em,
- ._i,
- ._ins,
- ._label,
- ._q,
- ._span,
- ._strong,
- ._sub,
- ._sup {
- display: inline;
- }
-
-
- .__bdo,
- .__bdi,
- .__ruby,
- .__rt {
- display: inline-block;
- }
-
- ._video {
- position: relative;
- display: inline-block;
- width: 300px;
- height: 225px;
- background-color: black;
- }
- ._video::after {
- position: absolute;
- top: 50%;
- left: 50%;
- margin: -15px 0 0 -15px;
- content: '';
- border-color: transparent transparent transparent white;
- border-style: solid;
- border-width: 15px 0 15px 30px;
- }
- </style>
|