element中图片链接点击直接大图浏览

1.使用elementUi 中el-image的进行组件封装

<template>
    <div class="image-preview">
        <el-image style="width: 0; height: 0" ref="previewImg" :src="url" :preview-src-list="srcList">
        </el-image>
    </div>
</template>

<script>
export default {
    props: {
        srcList: {
            type: Array,
            required: true,
            default: null
        }
    },
    data() {
        return {
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            // srcList: []
        }
    },
    methods: {
        viewBigPicture() {
            this.$refs.previewImg.showViewer = true
        }
    }
}
</script>
<style lang="scss">
.el-image-viewer__btn {
    opacity: 1;
}
</style>

2.进行引用

import ImageViewer from '@/pages/common/ImageViewer.vue'

3.设置点击事件

picture(value) {
      // console.log(value)
      this.srcList = [value]
      this.$refs.imgViewer.viewBigPicture()
    },