vux 显示 html,vux: v-html里的图片放大

具体情况就是从后台获取文章详情，用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。

下面就是用到的代码。

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;

}

}

},