关于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;},