【element】谷歌浏览器 el-dialog 概率出现背景全黑，透明度不生效

最新推荐文章于 2023-10-19 09:48:06 发布

丶思想

最新推荐文章于 2023-10-19 09:48:06 发布

阅读量1.4k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42925191/article/details/125263403

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文档介绍了一个在谷歌浏览器中遇到的关于Element-UI弹窗（el-dialog）背景透明度不生效的问题。问题表现为遮罩层全黑且opacity设置无效。解决方案是通过设置遮罩层的opacity为1，并使用background属性配合rgba颜色实现透明效果。作者提供了相应的JavaScript代码片段，通过监听Dialog和MessageBox组件的可见性变化来动态调整遮罩层样式。

摘要由CSDN通过智能技术生成

项目场景：

谷歌浏览器

问题描述

谷歌浏览器 el-dialog 概率出现背景全黑，透明度不生效
class v-modal opacity:0.5 不生效

解决方案：

采用 opacity: 1 background: 0.5透明度的黑色
代码如下：

import Vue from 'vue'
import Element from 'element-ui'
import '../element-variables.scss'
/**
 * 来自 Karen 的帅气注释 2022-06-13 11:22:55
 * 解决遮罩层黑屏
 */
const resetModalStyle = () => {
  setTimeout(() => {
    const vmodal = document.body.getElementsByClassName('v-modal')
    if (vmodal.length) {
      vmodal[0].style.opacity = 1
      vmodal[0].style.background = 'rgba(0,0,0,0.5)'
    }
  })
}
const dialogWatch = Element.Dialog.watch.visible
Element.Dialog.watch.visible = function() {
  return new Promise(resolve => {
    resetModalStyle()
    resolve(dialogWatch.apply(this, arguments))
  })
}
const MessageConfirm = Element.MessageBox.confirm
Element.MessageBox.confirm = function() {
  return new Promise(resolve => {
    resetModalStyle()
    resolve(MessageConfirm.apply(this, arguments))
  })
}
Vue.use(Element)