[element-ui] el-dialog和v-viewer的层级问题

问题描述 :当el-dialogv-viewer⼀起使⽤时,点击图⽚预览,会出现预览的图⽚z-index⽐el-dialog

原因el-dialog默认的z-index是2000 ,每次关闭后再次打开z-index会递增2左右,v-viewer的层级默认是2015 ,这样预览不了⼏次,就会出现el-dialog的z-index⼤于v-viewer的z-index

需要修改viewer的默认层级,我这里是在全局定义修改的,仅供参考

js 复制代码
import Viewer from 'v-viewer' // 图片预览
import 'viewerjs/dist/viewer.css'
js 复制代码
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
  } })

或者

js 复制代码
Vue.use(Viewer);
Viewer.setDefaults({
  Options: {
    'zIndex': 9999,
	 ...
  }
})

参考:

vue使用v-viewer插件做图片展示预览遇到弹框再次打开无法预览图片问题

相关推荐
_codemonster1 小时前
Vue的三种使用方式对比
前端·javascript·vue.js
一起养小猫1 小时前
Flutter for OpenHarmony 实战_魔方应用UI设计与交互优化
flutter·ui·交互·harmonyos
wqq63108553 小时前
Python基于Vue的实验室管理系统 django flask pycharm
vue.js·python·django
Deng9452013143 小时前
Vue + Flask 前后端分离项目实战:从零搭建一个完整博客系统
前端·vue.js·flask
Hello.Reader4 小时前
Flink 文件系统通用配置默认文件系统与连接数限制实战
vue.js·flink·npm
EchoEcho6 小时前
深入理解 Vue.js 渲染机制:从声明式到虚拟 DOM 的完整实现
vue.js
C澒6 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
发现一只大呆瓜7 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
鱼毓屿御8 小时前
如何给用户添加权限
前端·javascript·vue.js
Java新手村8 小时前
基于 Vue 3 + Spring Boot 3 的 AI 面试辅助系统:实时语音识别 + 大模型智能回答
vue.js·人工智能·spring boot