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

相关推荐
ZC跨境爬虫11 小时前
跟着 MDN 学 HTML day_12:(HTML网页图片嵌入)
前端·javascript·css·ui·html
你真的快乐吗11 小时前
@fuxishi/svg-icon:一个 Vue 3 svg本地图标+iconify图标组件库,让图标管理不再头疼
前端·vue.js·typescript
吴声子夜歌12 小时前
Vue3——脚手架Vite
前端·javascript·vue.js·vite
rADu REME13 小时前
SpringBoot + vue 管理系统
vue.js·spring boot·后端
ZC跨境爬虫15 小时前
跟着 MDN 学 HTML day_11:(语义化容器全站重构+独立CSS拆分+字体合规引入)
前端·css·ui·重构·html·edge浏览器
ZC跨境爬虫15 小时前
跟着 MDN 学 HTML day_10:(超链接核心语法+路径规则)
前端·css·笔记·ui·html·edge浏览器
被考核重击15 小时前
Vue响应式原理(下)
前端·javascript·vue.js
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
前端摸鱼匠1 天前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
Avalon7121 天前
Unity3D响应式渲染UI框架UniVue
游戏·ui·unity·c#·游戏引擎