美文网首页
vux: v-html里的图片放大

vux: v-html里的图片放大

作者: 喵整点薯条 | 来源:发表于2018-05-07 18:31 被阅读491次

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

相关文章

网友评论

      本文标题:vux: v-html里的图片放大

      本文链接:https://www.haomeiwen.com/subject/tnvvrftx.html