关于vue.js:Elementul的-elimageviewer组件实现点击或者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;},