[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插件做图片展示预览遇到弹框再次打开无法预览图片问题

相关推荐
大橙子额3 分钟前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
LYFlied1 小时前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js
B站_计算机毕业设计之家2 小时前
豆瓣电影数据采集分析推荐系统 | Python Vue Flask框架 LSTM Echarts多技术融合开发 毕业设计源码 计算机
vue.js·python·机器学习·flask·echarts·lstm·推荐算法
xjt_09013 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农3 小时前
Vue 2.3
前端·javascript·vue.js
跳动的梦想家h4 小时前
环境配置 + AI 提效双管齐下
java·vue.js·spring
Mr Xu_5 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
微祎_5 小时前
构建一个 Flutter 点击速度测试器:深入解析实时交互、性能度量与响应式 UI 设计
flutter·ui·交互
AAA阿giao5 小时前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
一 乐6 小时前
校园二手交易|基于springboot + vue校园二手交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端