记录使用vue elementUI实现在v-html为图片设置可点击放大的功能

最新推荐文章于 2023-12-28 08:01:44 发布

ZX星XX

最新推荐文章于 2023-12-28 08:01:44 发布

阅读量1.3k

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_42931681/article/details/127793232

版权

showImg(val) { // val为传递过来的html字符串

        let srcList = [];  // 定义一个数组用来接收后面的img地址
        
        val.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {  // 查找匹配的元素   match为整个img标签  capture为src中的内容
            srcList.push(capture);
        });
        
        if (srcList.length > 0) {  //  当数组大于0时设置elementUI的图片预览组件
            ImagePreview({   // elementUI的图片预览组件，具体参数可查看elementUI官网
                images: srcList,
                closeable: true,
                onClose() {
                    // do something
                }
            });
        }
    },