[JavaScript知识库]vue中el-image-viewer大图预览 给 v-html 添加 onclick 拦截事件

直接当前页面引入 ElImageViewer css引入为了正常显示

    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    import 'element-ui/lib/theme-chalk/index.css';
    import imageViewMixins from '@/views/mixins/imageView.js';

    export default {
        mixins: [imageViewMixins],
        components: { ElImageViewer },

当前页面里面添加

  <el-image-viewer v-if="showClickImage" :on-close="$closeViewer" :url-list="srcList" />

  <div  v-html="html的数据"  
  v-on:click.native="$contentClick($event,html的数据)"></div>

这个是混入的方法imageViewMixins ，contentClick 方法 把html 里面的 item图片url 提取出来

下面的是 imageView.js

export default {
    data() {
        return {
            srcList: [],
            showClickImage: false,
        }
    },
    methods: {
        //内容点击事件，主要是为了解决图片弹层问题
        $contentClick(event, item) {
            const target = event.target;
            if (target.tagName === 'IMG') {
                event.preventDefault();
                const content = item;
                let imgReg = /<img.*?(?:>|\/>)/gi; //匹配图片中的img标签
                let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
                let arr = content.match(imgReg); //筛选出所有的img
                let srcArr = [];
                for (let i = 0; i < arr.length; i++) {
                    let src = arr[i].match(srcReg);
                    // 获取图片地址
                    srcArr.push(src[1]);
                }
                this.srcList = srcArr
                this.showClickImage = true
            }
        },
        // 关闭查看器
        $closeViewer() {
            this.showClickImage = false
        }

    }
}

这个项目中直接用就可以了

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖