使用element组件库 引入:
components: {
'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer'),
},
使用:
<el-image-viewer
v-if="isZoomed"
:url-list="imageSrc"
:on-close="imageViewerClose"
:bottomslot="{}"
/>
- url-list:是数组,数组内容为:['url','url','url']
- on-close:是关闭事件的回调函数,一般都是让控制组件显示/隐藏的变量变成false(必须得写函数,不能直接写行内逻辑,写了也不生效,比如:isZoomed = false)
- bottomslot:组件的底部配置项,一般默认即可(默认也得传一个空对象)