关于vue.js:Elementul的-elimageviewer组件实现js触发能预览大图功能

关于vue.js:Elementul的-elimageviewer组件实现js触发能预览大图功能

 1、导入组件

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

　

2.注册组件

3.应用组件

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

4.相干的data定义

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

5.methods

// 查看图片
showImage(path) {
    this.srcList[0] = path; // 需要预览的图片
    this.showViewer = true;
},
// 敞开查看器
closeViewer() {
    this.showViewer = false;
},
// 关闭查看器
closeViewer() {
    this.showViewer = false;

}