具体情况就是从后台获取文章详情,用v-html的方法输出,怎么才可以实现点击图片令图片放大的效果。
关于图片放大的效果,可以调用vux的组件Previewer。
https://doc.vux.li/zh-CN/components/previewer.html
问题的难度是怎么给每个图片加上click事件呢?并且给每个事件附上index呢?
如果你用 Previewer 绑定了一个所有图片的链接的数组的话。
当初第一想法是利用正则表达式找出所有图片链接,这方面还是很容易的,但是继续下去呢,把所有图片链接存放进previewer的绑定数组,然后点击图片时还需要找到对应的数组中的index,嗯,还有给每张图片绑定点击事件。
太麻烦,太绕了。
没有方便一点的方法吗?
后来利用事件冒泡顺利解决了这个问题,既不用正则表达式费心思找出图片链接,也不用要给每张图片标序。
在输出v-html的父元素(包裹输出内容的元素)绑定click事件。
利用e.target.nodeName == 'IMG'
判断是否点击了图片,然后可以利用 e.target.currentSrc 获取当前图片的链接,存放进previewer的绑定数组,让这个数组每次点击时都只存放当前图片的链接,所以触发previewer所需要的index自然而然就解决了,每次都是0。
下面就是用到的代码。
<div class="content">
<div v-html="detail.data.content" @click="previewImage"></div>
</div>
<div v-transfer-dom>
<previewer :list="list" ref="previewer"></previewer>
</div>
import { Previewer, TransferDom } from 'vux';
directives: {
TransferDom
},
components: {
Previewer
},
methods: {
previewImage (e) {
if (e.target.nodeName == 'IMG') {
let url = e.target.currentSrc;
let item = {
src: url
};
this.list.length = 0;
this.list.push(item);
this.$refs.previewer.show(0);
} else {
return;
}
}
},
网友评论