值得注意的是,如果el-image-viewer组件在el-dialog里面,el-dialog的层级是优先的,因此我们需要属性z-index去更改el-image-viewer组件样式的层级: HTML <!-- 图片查看器 --><el-image-viewerv-if="showViewer":on-close="closeViewer":url-list="[url]"index="9999"/> ...
值得注意的是,如果el-image-viewer组件在el-dialog里面,el-dialog的层级是优先的,因此我们需要属性z-index去更改el-image-viewer组件样式的层级: <!-- 图片查看器 --> <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" index="9999"/> 1. 2. 补充: 以上方法不兼容IE!
zIndex 查看器层级 onSwitch 图片切换事件 onClose 查看器关闭事件 initialIndex 初始化展示哪张图片 这里我们只需要使用到的就只有urlList与onClose两个属性 ,一个用来放图片链接一个用来关闭查看器。 需要使用的属性我们知道了,然后我们就在代码里面引入image-viewer就可以直接使用。
},methods:{onPreview() {this.showViewer=true},// 关闭查看器closeViewer() {this.showViewer=false}, } 神马,没有生效,好吧,el-image-viewer写在了el-dialog中,对话框层级太高被覆盖了,zIndex处理一下: <el-buttontype="text"@click="onPreview">图片预览</el-button><el-image-viewer:zIndex='999...
1、首先el-image-viewer组件在el-dialog里面，el-dialog的层级是优先的。2、其次需要属性z-index去更改。3、最后el-image-viewer组件样式的层级，完成el-image-viewer预览样式的修改，完成操作。
目录结构 index.vue 代码语言:javascript 复制 <template><el-image-viewer v-if="show"v-bind="$attrs"hide-on-click-modal @close="show = false"/></template>import{ref,watch}from"vue"import{ElImageViewer}from"element-plus"//自定义函数组件无法使用全局组件,需要单独引入constprops=defineProps({visi...