不知道为什么我的项目中我点了大图所弹出的那个大图预览的div包含在了标签中,并没有全部展开,那我索性就直接控制它的弹框好了
需要注意的是 这个组件需要单独引入哈,
在引入element-ui的前提下
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
components: {
ElImageViewer
},
.....
<el-image-viewer
v-if="showViewer"
:on-close="onClose"
:on-switch="onSwitch"
:url-list="urlList"
/>
参数 说明 类型 可选值 默认值
initialIndex 默认显示的第一张预览图(urlList的下标值) Number -- 0
urlList 预览图的地址列表 Array --
zIndex 设置图片预览的 z-index Number -- 2000
onClose 关闭图片预览时的回调函数 Function -- --
onSwitch 切换上一张下一张图片时的回调函数 Function -- -- (默认参数index 返回图片所在下标)
使用el-image-viewer就可以通过控制showViewer来实现组件的显影从而实现大图预览了
有的项目使用的element组件引入报错 然后我就会使用下面的方法
<el-image
style="display: none;"
ref="imageView"
:src="imageViewUrl"
:preview-src-list="[imageViewUrl]"
>
<template #placeholder> </template>
</el-image>
data中定义一个参数 imageViewUrl
其中 preview-src-list可以传个数组 在预览时可切换
具体的使用场景按实际情况来就行
handlePreview(item) {
const url = item.url;
this.imageViewUrl = url;
this.$nextTick(() => {
this.$refs.imageView.showViewer = true;
});
},