Element-ul的 el-image-viewer组件实现点击或者js触发能预览大图功能

element-ul有大图预览功能

但我们不想展示图片，想实现的是点击按钮，或者通过js事件触发，能预览大图（多张也可以预览）的功能。

1、导入组件

    // 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

2.注册组件

    components: {
      ElImageViewer,
    },

3.使用组件

         <p @click="showImage(picture)">查看图片</p>
      <el-image-viewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="srcList"
      ></el-image-viewer>

4.相关的data定义

    data() {
    return {
      srcList: [],
      showViewer: false // 显示查看器
   }
}

5.methods

    // 查看图片
showImage(path) {
  this.srcList = path;
  this.showViewer = true;
},
// 关闭查看器
closeViewer() {
  this.showViewer = false;
},