678 lines
20 KiB
Vue
678 lines
20 KiB
Vue
|
<!--
|
|||
|
|
parser 主模块组件
|
|||
|
|
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;">
|
|||
|
|
<slot v-if="(!html||!html.length||(!html[0].name&&!html[0].type))&&!nodes.length"></slot>
|
|||
|
|
<view class="_contain" :style="(selectable?'user-select:text;-webkit-user-select:text;':'')+(showWithAnimation?'opacity:0;':'')"
|
|||
|
|
:animation="showAnimation" @tap="tap" @touchstart="touchstart" @touchmove="touchmove">
|
|||
|
|
<!--#ifdef H5-->
|
|||
|
|
<div :id="'rtf'+uid"></div>
|
|||
|
|
<!--#endif-->
|
|||
|
|
<!--#ifndef H5-->
|
|||
|
|
<trees :nodes="nodes.length?nodes:(html&&html.length&&(html[0].name||html[0].type)?html:[])" :loadVideo="loadVideo" />
|
|||
|
|
<!--#endif-->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// #ifndef H5
|
|||
|
|
import trees from "./libs/trees"
|
|||
|
|
var document; // document 补丁包，详见 https://jin-yufeng.github.io/Parser/#/instructions?id=document
|
|||
|
|
const parseHtml = require('./libs/MpHtmlParser.js');
|
|||
|
|
const cache = getApp().parserCache = {};
|
|||
|
|
const CssHandler = require("./libs/CssHandler.js");
|
|||
|
|
// 散列函数（计算 cache 的 key）
|
|||
|
|
function Hash(str) {
|
|||
|
|
for (var i = str.length, hash = 5381; i--;)
|
|||
|
|
hash += (hash << 5) + str.charCodeAt(i);
|
|||
|
|
return hash;
|
|||
|
|
};
|
|||
|
|
// #endif
|
|||
|
|
// 动画
|
|||
|
|
const showAnimation = uni.createAnimation({
|
|||
|
|
timingFunction: "ease"
|
|||
|
|
}).opacity(1).step().export();
|
|||
|
|
const config = require('./libs/config.js');
|
|||
|
|
// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU || MP-TOUTIAO
|
|||
|
|
// 图片链接去重
|
|||
|
|
function Deduplicate(src) {
|
|||
|
|
if (src.indexOf("http") != 0) return src;
|
|||
|
|
var newSrc = '';
|
|||
|
|
for (var i = 0; i < src.length; i++) {
|
|||
|
|
newSrc += (Math.random() >= 0.5 ? src[i].toUpperCase() : src[i].toLowerCase());
|
|||
|
|
if (src[i] == '/' && src[i - 1] != '/' && src[i + 1] != '/') break;
|
|||
|
|
}
|
|||
|
|
newSrc += src.substring(i + 1);
|
|||
|
|
return newSrc;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
export default {
|
|||
|
|
name: 'parser',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
loadVideo: false,
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
uid: this._uid,
|
|||
|
|
// #endif
|
|||
|
|
showAnimation: '',
|
|||
|
|
// #ifndef H5
|
|||
|
|
controls: {},
|
|||
|
|
// #endif
|
|||
|
|
nodes: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// #ifndef H5
|
|||
|
|
components: {
|
|||
|
|
trees
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
props: {
|
|||
|
|
"html": {
|
|||
|
|
type: null,
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
// #ifndef MP-ALIPAY
|
|||
|
|
"autopause": {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
"autosetTitle": {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
"domain": {
|
|||
|
|
type: String,
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
|||
|
|
"gestureZoom": {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-WEIXIN || MP-QQ || H5 || APP-PLUS
|
|||
|
|
"lazyLoad": {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
"selectable": {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
"tagStyle": {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {
|
|||
|
|
return {};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"showWithAnimation": {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
"useAnchor": {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
"useCache": {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
html(html) {
|
|||
|
|
this.setContent(html, undefined, true);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.imgList = [];
|
|||
|
|
this.imgList.each = function(f) {
|
|||
|
|
for (var i = 0; i < this.length; i++) {
|
|||
|
|
// #ifdef MP-ALIPAY || APP-PLUS
|
|||
|
|
this[i] = f(this[i], i, this) || this[i];
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef MP-ALIPAY || APP-PLUS
|
|||
|
|
var newSrc = f(this[i], i, this);
|
|||
|
|
if (newSrc) {
|
|||
|
|
if (this.includes(newSrc)) this[i] = Deduplicate(newSrc);
|
|||
|
|
else this[i] = newSrc;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.setContent(this.html, undefined, true);
|
|||
|
|
},
|
|||
|
|
// #ifdef H5
|
|||
|
|
beforeDestroy() {
|
|||
|
|
if (this._observer) this._observer.disconnect();
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
methods: {
|
|||
|
|
// #ifdef H5
|
|||
|
|
setContent(html, options, observed) {
|
|||
|
|
if (typeof options == "object")
|
|||
|
|
for (var key in options) {
|
|||
|
|
key = key.replace(/-(\w)/g, function() {
|
|||
|
|
return arguments[1].toUpperCase();
|
|||
|
|
})
|
|||
|
|
this[key] = options[key];
|
|||
|
|
}
|
|||
|
|
html = html || '';
|
|||
|
|
if (!html) {
|
|||
|
|
if (this.rtf) this.rtf.parentNode.removeChild(this.rtf);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (typeof html != "string") html = this.Dom2Str(html.nodes || html);
|
|||
|
|
// 处理 rpx
|
|||
|
|
if (html.includes("rpx"))
|
|||
|
|
html = html.replace(/[0-9.]*rpx/g, function($) {
|
|||
|
|
return parseFloat($) * config.rpx + "px";
|
|||
|
|
})
|
|||
|
|
// 处理 tag-style 和 userAgentStyles
|
|||
|
|
var style = "<style>";
|
|||
|
|
for (var item in config.userAgentStyles)
|
|||
|
|
style += (item + '{' + config.userAgentStyles[item] + '}');
|
|||
|
|
for (var item in this.tagStyle)
|
|||
|
|
style += (item + '{' + this.tagStyle[item] + '}');
|
|||
|
|
style += "</style>";
|
|||
|
|
html = style + html;
|
|||
|
|
if (this.rtf) this.rtf.parentNode.removeChild(this.rtf);
|
|||
|
|
this.rtf = document.createElement('div');
|
|||
|
|
this.rtf.innerHTML = html;
|
|||
|
|
for (var style of this.rtf.getElementsByTagName("style")) {
|
|||
|
|
style.innerHTML = style.innerHTML.replace(/\s*body/g, "#rtf" + this._uid);
|
|||
|
|
style.setAttribute("scoped", "true");
|
|||
|
|
}
|
|||
|
|
// 懒加载
|
|||
|
|
if (this.lazyLoad && IntersectionObserver) {
|
|||
|
|
if (this._observer) this._observer.disconnect();
|
|||
|
|
this._observer = new IntersectionObserver(changes => {
|
|||
|
|
for (var change of changes) {
|
|||
|
|
if (change.isIntersecting) {
|
|||
|
|
change.target.src = change.target.getAttribute("data-src");
|
|||
|
|
change.target.removeAttribute("data-src");
|
|||
|
|
this._observer.unobserve(change.target);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
rootMargin: "1000px 0px 1000px 0px"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
var component = this;
|
|||
|
|
// 获取标题
|
|||
|
|
var title = this.rtf.getElementsByTagName("title");
|
|||
|
|
if (title.length && this.autosetTitle)
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: title[0].innerText
|
|||
|
|
})
|
|||
|
|
// 图片处理
|
|||
|
|
this.imgList.length = 0;
|
|||
|
|
var imgs = this.rtf.getElementsByTagName("img");
|
|||
|
|
for (var i = 0; i < imgs.length; i++) {
|
|||
|
|
var img = imgs[i];
|
|||
|
|
img.style.maxWidth = "100%";
|
|||
|
|
img.i = i;
|
|||
|
|
if (this.domain && img.getAttribute("src")[0] == "/") {
|
|||
|
|
if (img.getAttribute("src")[1] == "/")
|
|||
|
|
img.src = (this.domain.includes("://") ? this.domain.split("://")[0] : "http") + ':' + img.getAttribute("src");
|
|||
|
|
else img.src = this.domain + img.getAttribute("src");
|
|||
|
|
}
|
|||
|
|
component.imgList.push(img.src);
|
|||
|
|
if (img.parentElement.nodeName != 'A') {
|
|||
|
|
img.onclick = function() {
|
|||
|
|
if (!this.hasAttribute('ignore')) {
|
|||
|
|
var preview = true;
|
|||
|
|
this.ignore = () => preview = false;
|
|||
|
|
component.$emit('imgtap', this);
|
|||
|
|
if (preview) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
current: this.i,
|
|||
|
|
urls: component.imgList
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
img.onerror = function() {
|
|||
|
|
component.$emit('error', {
|
|||
|
|
source: "img",
|
|||
|
|
target: this
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (component.lazyLoad && this._observer) {
|
|||
|
|
img.setAttribute("data-src", img.src);
|
|||
|
|
img.removeAttribute("src");
|
|||
|
|
this._observer.observe(img);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 链接处理
|
|||
|
|
var links = this.rtf.getElementsByTagName("a");
|
|||
|
|
for (var link of links) {
|
|||
|
|
link.onclick = function(e) {
|
|||
|
|
var jump = true,
|
|||
|
|
href = this.getAttribute("href");
|
|||
|
|
component.$emit('linkpress', {
|
|||
|
|
href,
|
|||
|
|
ignore: () => jump = false
|
|||
|
|
});
|
|||
|
|
if (jump && href) {
|
|||
|
|
if (href[0] == '#') {
|
|||
|
|
if (component.useAnchor) {
|
|||
|
|
component.navigateTo({
|
|||
|
|
id: href.substring(1)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} else if (href.indexOf("http") == 0 || href.indexOf("//") == 0)
|
|||
|
|
return true;
|
|||
|
|
else {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: href
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 视频处理
|
|||
|
|
var videos = this.rtf.getElementsByTagName("video");
|
|||
|
|
component.videoContexts = videos;
|
|||
|
|
for (var video of videos) {
|
|||
|
|
video.style.maxWidth = "100%";
|
|||
|
|
video.onerror = function() {
|
|||
|
|
component.$emit('error', {
|
|||
|
|
source: "video",
|
|||
|
|
target: this
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
video.onplay = function() {
|
|||
|
|
if (component.autopause) {
|
|||
|
|
for (var video of component.videoContexts) {
|
|||
|
|
if (video != this)
|
|||
|
|
video.pause();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 音频处理
|
|||
|
|
var audios = this.rtf.getElementsByTagName("audios");
|
|||
|
|
for (var audio of audios) {
|
|||
|
|
audio.onerror = function(e) {
|
|||
|
|
component.$emit('error', {
|
|||
|
|
source: "audio",
|
|||
|
|
target: this
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
document.getElementById("rtf" + this._uid).appendChild(this.rtf);
|
|||
|
|
if (this.showWithAnimation)
|
|||
|
|
this.showAnimation = showAnimation;
|
|||
|
|
if (!observed) this.nodes = [0];
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
var rect = this.rtf.getBoundingClientRect();
|
|||
|
|
this.width = rect.width;
|
|||
|
|
this.$emit("ready", rect);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
Dom2Str(nodes) {
|
|||
|
|
var str = "";
|
|||
|
|
for (var node of nodes) {
|
|||
|
|
if (node.type == "text")
|
|||
|
|
str += node.text;
|
|||
|
|
else {
|
|||
|
|
str += ('<' + node.name);
|
|||
|
|
for (var attr in node.attrs || {})
|
|||
|
|
str += (' ' + attr + '="' + node.attrs[attr] + '"');
|
|||
|
|
if (!node.children || !node.children.length) str += "/>";
|
|||
|
|
else str += ('>' + this.Dom2Str(node.children) + "</" + node.name + '>');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return str;
|
|||
|
|
},
|
|||
|
|
getText(whiteSpace = true) {
|
|||
|
|
if (!whiteSpace) return this.rtf.innerText.replace(/\s/g, '');
|
|||
|
|
return this.rtf.innerText;
|
|||
|
|
},
|
|||
|
|
navigateTo(obj) {
|
|||
|
|
obj.fail = obj.fail || (() => {});
|
|||
|
|
if (!this.useAnchor)
|
|||
|
|
return obj.fail({
|
|||
|
|
errMsg: "Use-anchor attribute is disabled"
|
|||
|
|
})
|
|||
|
|
if (!obj.id) {
|
|||
|
|
window.scrollTo(0, this.rtf.offsetTop);
|
|||
|
|
return obj.success ? obj.success({
|
|||
|
|
errMsg: "pageScrollTo:ok"
|
|||
|
|
}) : null;
|
|||
|
|
}
|
|||
|
|
var target = document.getElementById(obj.id);
|
|||
|
|
if (!target) return obj.fail({
|
|||
|
|
errMsg: "Label not found"
|
|||
|
|
});
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: this.rtf.offsetTop + target.offsetTop,
|
|||
|
|
success: obj.success,
|
|||
|
|
fail: obj.fail
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef H5
|
|||
|
|
setContent(html, options, observed) {
|
|||
|
|
if (typeof options == "object")
|
|||
|
|
for (var key in options) {
|
|||
|
|
key = key.replace(/-(\w)/g, function($, $1) {
|
|||
|
|
return $1.toUpperCase();
|
|||
|
|
})
|
|||
|
|
this[key] = options[key];
|
|||
|
|
}
|
|||
|
|
if (this.showWithAnimation)
|
|||
|
|
this.showAnimation = showAnimation;
|
|||
|
|
if (!html) {
|
|||
|
|
if (observed) return;
|
|||
|
|
else this.nodes = [];
|
|||
|
|
} else if (typeof html == "string") {
|
|||
|
|
// 缓存读取
|
|||
|
|
if (this.useCache) {
|
|||
|
|
var hash = Hash(html);
|
|||
|
|
if (cache[hash])
|
|||
|
|
this.nodes = cache[hash];
|
|||
|
|
else {
|
|||
|
|
this.nodes = parseHtml(html, this);
|
|||
|
|
cache[hash] = this.nodes;
|
|||
|
|
}
|
|||
|
|
} else this.nodes = parseHtml(html, this);
|
|||
|
|
this.$emit('parse', this.nodes);
|
|||
|
|
} else if (Object.prototype.toString.call(html) == "[object Array]") {
|
|||
|
|
if (!observed) this.nodes = html;
|
|||
|
|
else this.nodes = [];
|
|||
|
|
// 非本插件产生的 array 需要进行一些转换
|
|||
|
|
if (html.length && html[0].PoweredBy != "Parser") {
|
|||
|
|
const Parser = {
|
|||
|
|
_imgNum: 0,
|
|||
|
|
_videoNum: 0,
|
|||
|
|
_audioNum: 0,
|
|||
|
|
_domain: this.domain,
|
|||
|
|
_protocol: this.domain ? (this.domain.includes("://") ? this.domain.split("://")[0] : "http") : undefined,
|
|||
|
|
_STACK: [],
|
|||
|
|
CssHandler: new CssHandler(this.tagStyle)
|
|||
|
|
};
|
|||
|
|
Parser.CssHandler.getStyle('');
|
|||
|
|
|
|||
|
|
function DFS(nodes) {
|
|||
|
|
for (var i = 0, node; node = nodes[i++];) {
|
|||
|
|
if (node.type == "text") continue;
|
|||
|
|
node.attrs = node.attrs || {};
|
|||
|
|
for (var item in node.attrs) {
|
|||
|
|
if (!config.trustAttrs[item]) node.attrs[item] = undefined;
|
|||
|
|
else if (typeof node.attrs[item] != "string") node.attrs[item] = node.attrs[item].toString();
|
|||
|
|
}
|
|||
|
|
config.LabelAttrsHandler(node, Parser);
|
|||
|
|
if (config.blockTags[node.name]) node.name = 'div';
|
|||
|
|
else if (!config.trustTags[node.name]) node.name = 'span';
|
|||
|
|
if (node.children && node.children.length) {
|
|||
|
|
Parser._STACK.push(node);
|
|||
|
|
DFS(node.children);
|
|||
|
|
Parser._STACK.pop();
|
|||
|
|
} else node.children = undefined;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
DFS(html);
|
|||
|
|
this.nodes = html;
|
|||
|
|
}
|
|||
|
|
} else if (typeof html == 'object' && html.nodes) {
|
|||
|
|
this.nodes = html.nodes;
|
|||
|
|
console.warn("Parser 类型错误：object 类型已废弃，请直接将 html 设置为 object.nodes （array 类型）");
|
|||
|
|
} else {
|
|||
|
|
return this.$emit('error', {
|
|||
|
|
source: "parse",
|
|||
|
|
errMsg: "传入的nodes数组格式不正确！应该传入的类型是array，实际传入的类型是：" + typeof html.nodes
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.loadVideo = false;
|
|||
|
|
// #endif
|
|||
|
|
if (document) this.document = new document("html", this.html || html, this);
|
|||
|
|
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.imgList.length = 0;
|
|||
|
|
this.videoContexts = [];
|
|||
|
|
const getContext = (components) => {
|
|||
|
|
for (var i = components.length; i--;) {
|
|||
|
|
let component = components[i];
|
|||
|
|
if (component.$options.name == "trees") {
|
|||
|
|
var observered = false;
|
|||
|
|
for (var j = component.nodes.length, item; item = component.nodes[--j];) {
|
|||
|
|
if (item.c) continue;
|
|||
|
|
if (item.name == 'img') {
|
|||
|
|
if (item.attrs.src && item.attrs.i) {
|
|||
|
|
// #ifndef MP-ALIPAY || APP-PLUS
|
|||
|
|
if (this.imgList.indexOf(item.attrs.src) == -1)
|
|||
|
|
this.imgList[item.attrs.i] = item.attrs.src;
|
|||
|
|
else this.imgList[item.attrs.i] = Deduplicate(item.attrs.src);
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-ALIPAY || APP-PLUS
|
|||
|
|
this.imgList[item.attrs.i] = item.attrs.src;
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
// #ifndef MP-ALIPAY
|
|||
|
|
if (!observered) {
|
|||
|
|
observered = true;
|
|||
|
|
if (this.lazyLoad && uni.createIntersectionObserver) {
|
|||
|
|
if (component._observer) component._observer.disconnect();
|
|||
|
|
component._observer = uni.createIntersectionObserver(component);
|
|||
|
|
component._observer.relativeToViewport({
|
|||
|
|
top: 1000,
|
|||
|
|
bottom: 1000
|
|||
|
|
}).observe('._img', res => {
|
|||
|
|
component.imgLoad = true;
|
|||
|
|
component._observer.disconnect();
|
|||
|
|
component._observer = null;
|
|||
|
|
})
|
|||
|
|
} else
|
|||
|
|
component.imgLoad = true;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
// #ifndef MP-ALIPAY
|
|||
|
|
else if (item.name == 'video') {
|
|||
|
|
var context = uni.createVideoContext(item.attrs.id, component);
|
|||
|
|
context.id = item.attrs.id;
|
|||
|
|
this.videoContexts.push(context);
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
else if (item.name == 'audio' && item.attrs.autoplay)
|
|||
|
|
wx.createAudioContext(item.attrs.id, component).play();
|
|||
|
|
// #endif
|
|||
|
|
// 设置标题
|
|||
|
|
else if (item.name == "title" && this.autosetTitle && item.children[0].type == "text" && item.children[
|
|||
|
|
0].text)
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: item.children[0].text
|
|||
|
|
})
|
|||
|
|
// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
|||
|
|
if (item.attrs && item.attrs.id) {
|
|||
|
|
this.anchors = this.anchors || [];
|
|||
|
|
this.anchors.push({
|
|||
|
|
id: item.attrs.id,
|
|||
|
|
node: component
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (component.$children.length)
|
|||
|
|
getContext(component.$children)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// #ifdef MP-TOUTIAO
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// #endif
|
|||
|
|
getContext(this.$children);
|
|||
|
|
// #ifndef APP-PLUS
|
|||
|
|
this.createSelectorQuery()
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
uni.createSelectorQuery().in(this)
|
|||
|
|
// #endif
|
|||
|
|
.select("._contain").boundingClientRect().exec(res => {
|
|||
|
|
this.width = (res[0] ? res[0] : res).width;
|
|||
|
|
this.$emit("ready", res);
|
|||
|
|
});
|
|||
|
|
// #ifdef MP-TOUTIAO
|
|||
|
|
}, 200)
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.loadVideo = true;
|
|||
|
|
}, 3000);
|
|||
|
|
// #endif
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getText(whiteSpace = true) {
|
|||
|
|
var text = "";
|
|||
|
|
const DFS = (node) => {
|
|||
|
|
if (node.type == "text") return text += node.text;
|
|||
|
|
else {
|
|||
|
|
if (whiteSpace && (((node.name == 'p' || node.name == "div" || node.name == "tr" || node.name == "li" ||
|
|||
|
|
/h[1-6]/.test(node.name)) && text && text[text.length - 1] != '\n') || node.name == "br"))
|
|||
|
|
text += '\n';
|
|||
|
|
if (node.children)
|
|||
|
|
for (var i = 0; i < node.children.length; i++)
|
|||
|
|
DFS(node.children[i]);
|
|||
|
|
if (whiteSpace && (node.name == 'p' || node.name == "div" || node.name == "tr" || node.name == "li" || /h[1-6]/.test(
|
|||
|
|
node.name)) && text && text[text.length - 1] != '\n')
|
|||
|
|
text += '\n';
|
|||
|
|
else if (whiteSpace && node.name == "td") text += '\t';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var nodes = ((this.nodes && this.nodes.length) ? this.nodes : (this.html[0] && (this.html[0].name || this.html[0].type) ?
|
|||
|
|
this.html : []));
|
|||
|
|
if (!nodes.length) return "";
|
|||
|
|
for (var i = 0; i < this.data.html.length; i++) DFS(this.data.html[i]);
|
|||
|
|
return text;
|
|||
|
|
},
|
|||
|
|
navigateTo(obj) {
|
|||
|
|
obj.fail = obj.fail || (() => {});
|
|||
|
|
if (!this.useAnchor)
|
|||
|
|
return obj.fail({
|
|||
|
|
errMsg: "Use-anchor attribute is disabled"
|
|||
|
|
})
|
|||
|
|
var Scroll = (selector, component) => {
|
|||
|
|
const query = uni.createSelectorQuery().in(component ? component : this);
|
|||
|
|
query.select(selector).boundingClientRect();
|
|||
|
|
query.selectViewport().scrollOffset();
|
|||
|
|
query.exec(res => {
|
|||
|
|
if (!res || !res[0])
|
|||
|
|
return obj.fail({
|
|||
|
|
errMsg: "Label not found"
|
|||
|
|
});
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: res[1].scrollTop + res[0].top,
|
|||
|
|
success: obj.success,
|
|||
|
|
fail: obj.fail
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (!obj.id) Scroll("._contain");
|
|||
|
|
else {
|
|||
|
|
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
|||
|
|
Scroll('._contain >>> #' + obj.id + ', ._contain >>> .' + obj.id);
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
|||
|
|
for (var anchor of this.anchors) {
|
|||
|
|
if (anchor.id == obj.id) {
|
|||
|
|
Scroll("#" + obj.id + ", ." + obj.id, anchor.node);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
tap(e) {
|
|||
|
|
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
|||
|
|
if (this.gestureZoom && e.timeStamp - this.lastTime < 300) {
|
|||
|
|
if (this.zoomIn) {
|
|||
|
|
this.animation.translateX(0).scale(1).step();
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: (e.touches[0].pageY - e.currentTarget.offsetTop + this.initY) / 2 - e.touches[0].clientY,
|
|||
|
|
duration: 400
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
var initX = e.touches[0].pageX - e.currentTarget.offsetLeft;
|
|||
|
|
this.initY = e.touches[0].pageY - e.currentTarget.offsetTop;
|
|||
|
|
this.animation = uni.createAnimation({
|
|||
|
|
transformOrigin: initX + "px " + this.initY + "px 0",
|
|||
|
|
timingFunction: "ease-in-out"
|
|||
|
|
});
|
|||
|
|
// #ifdef MP-TOUTIAO
|
|||
|
|
this.animation.opacity(1);
|
|||
|
|
// #endif
|
|||
|
|
this.animation.scale(2).step();
|
|||
|
|
this.translateMax = initX / 2;
|
|||
|
|
this.translateMin = (initX - this.width) / 2;
|
|||
|
|
this.translateX = 0;
|
|||
|
|
}
|
|||
|
|
this.zoomIn = !this.zoomIn;
|
|||
|
|
this.showAnimation = this.animation.export();
|
|||
|
|
}
|
|||
|
|
this.lastTime = e.timeStamp;
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
touchstart(e) {
|
|||
|
|
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
|||
|
|
if (e.touches.length == 1)
|
|||
|
|
this.initX = this.lastX = e.touches[0].pageX;
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
touchmove(e) {
|
|||
|
|
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
|||
|
|
var diff = e.touches[0].pageX - this.lastX;
|
|||
|
|
if (this.zoomIn && e.touches.length == 1 && Math.abs(diff) > 20) {
|
|||
|
|
this.lastX = e.touches[0].pageX;
|
|||
|
|
if ((this.translateX <= this.translateMin && diff < 0) || (this.translateX >= this.translateMax && diff > 0))
|
|||
|
|
return;
|
|||
|
|
this.translateX += (diff * Math.abs(this.lastX - this.initX) * 0.05);
|
|||
|
|
if (this.translateX < this.translateMin)
|
|||
|
|
this.translateX = this.translateMin;
|
|||
|
|
if (this.translateX > this.translateMax)
|
|||
|
|
this.translateX = this.translateMax;
|
|||
|
|
this.animation.translateX(this.translateX).step();
|
|||
|
|
this.showAnimation = this.animation.export();
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
getVideoContext(id) {
|
|||
|
|
if (!id) return this.videoContexts;
|
|||
|
|
else
|
|||
|
|
for (var i = this.videoContexts.length; i--;)
|
|||
|
|
if (this.videoContexts[i].id == id) return this.videoContexts[i];
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
/* #ifndef MP-WEIXIN || APP-PLUS */
|
|||
|
|
:host {
|
|||
|
|
display: block;
|
|||
|
|
overflow: scroll;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._contain {
|
|||
|
|
display: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #endif */
|
|||
|
|
</style>
|