1、导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
2.注册组件
components: {
ElImageViewer,
},
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;
},