import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
components:{ElImageViewer},
data() {
return {
showViewer:false
},
methods: {
imageShow(url) {
this.showViewer = true
this.imgList=url;
}
}
};
在vue中引用组件,因为image-viewer是Image组件中单独的功能
<el-image-viewer
v-if="showViewer"
:on-close="()=>{showViewer=false,imgList=''}"
:url-list="[imgList]"/>
<el-table v-loading="loading" :data="list">
使用公共组件
showViewer:控制开关的绑定变量,可自定义。
on-close: 关闭事件,可绑定关闭触发事件。
list: 指向图片的url地址,用于显示预览的图片
viewUrl:此处为数组(viewUrl = [ ]),记得使用push存放,和清除数组的缓存。
<el-popover
placement="left 出现位置"
title&