...
|
...
|
@@ -13,7 +13,7 @@ |
|
|
<div class="article-context">
|
|
|
<div class="context-title">{{data.articleTitle}}</div>
|
|
|
<ClientOnly>
|
|
|
<div ref="richTextWrapper" @touchstart="tStart" @touchend="tEnd" class="context-rich-text">
|
|
|
<div ref="richTextWrapper" class="context-rich-text">
|
|
|
<VRuntimeTemplate v-once ref="richText" :template="richText" :parent="{}"
|
|
|
:templateProps="{getNoteProduct}"></VRuntimeTemplate>
|
|
|
</div>
|
...
|
...
|
@@ -62,6 +62,8 @@ const { mapState: mapArticleState, mapActions, mapGetters } = createNamespacedHe |
|
|
|
|
|
let timeOutEvent = null;
|
|
|
|
|
|
let isMoving = false;
|
|
|
|
|
|
export default {
|
|
|
name: 'ArticleDetailLong',
|
|
|
props: {
|
...
|
...
|
@@ -170,17 +172,27 @@ export default { |
|
|
...mapMutations(['SET_STATUS_BAR_COLOR']),
|
|
|
...mapActions(['fetchProductBySknList']),
|
|
|
tStart(e) {
|
|
|
if (e.target.src) {
|
|
|
isMoving = false;
|
|
|
if (e.currentTarget && e.currentTarget.dataset.src) {
|
|
|
let src = e.currentTarget.dataset.src;
|
|
|
|
|
|
timeOutEvent = setTimeout(() => {
|
|
|
this.$yoho.longClickSaveImage({ url: e.target.src });
|
|
|
}, 1000);
|
|
|
if (!isMoving) {
|
|
|
this.$yoho.longClickSaveImage({ url: src });
|
|
|
}
|
|
|
|
|
|
}, 1500);
|
|
|
}
|
|
|
},
|
|
|
tEnd() {
|
|
|
isMoving = false;
|
|
|
if (timeOutEvent) {
|
|
|
clearTimeout(timeOutEvent);
|
|
|
}
|
|
|
},
|
|
|
tMove() {
|
|
|
isMoving = true;
|
|
|
},
|
|
|
onFollowAuthor(follow) {
|
|
|
this.$emit('on-follow', this.data, follow);
|
|
|
},
|
...
|
...
|
@@ -240,6 +252,24 @@ export default { |
|
|
});
|
|
|
}
|
|
|
|
|
|
// 处理长按图片下载
|
|
|
if (childNodes.length > 0) {
|
|
|
let childsImgs = richText.querySelectorAll('img');
|
|
|
|
|
|
childsImgs.forEach((item) => {
|
|
|
if (item.parentNode && /P/i.test(item.parentNode.nodeName)) {
|
|
|
item.className += ' download-img';
|
|
|
item.parentNode.className += ' download-img-container';
|
|
|
if (item.src) {
|
|
|
item.parentNode.dataset.src = item.src;
|
|
|
item.parentNode.addEventListener('touchstart', vm.tStart);
|
|
|
item.parentNode.addEventListener('touchend', vm.tEnd);
|
|
|
item.parentNode.addEventListener('touchmove', vm.tMove);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
richText.querySelectorAll('a').forEach(ele => {
|
|
|
if (ele && ele.querySelector && ele.querySelector('img')) {
|
|
|
ele.classList.add('yoho-img-link');
|
...
|
...
|
@@ -417,6 +447,10 @@ export default { |
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
img.download-img {
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
font-size: 32px !important;
|
|
|
|
...
|
...
|
|