web端 PC端大图预览

47 阅读1分钟

使用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:组件的底部配置项,一般默认即可(默认也得传一个空对象)