[IE兼容]element 组件 el-dialog在低分辨率下出现半透明bug

最新推荐文章于 2024-05-23 15:20:32 发布
最新推荐文章于 2024-05-23 15:20:32 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 有趣的javascript 文章标签： elementui vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45776447/article/details/116748586
版权
本文介绍了在IE浏览器中，当使用element-ui的el-dialog组件且页面内容丰富时，可能会遇到对话框动画卡顿并显示半透明的bug。解决方法是通过监听visible属性的变化，并在一定延迟后设置其值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里写自定义目录标题

[IE兼容]element 组件 el-dialog在低分辨率下出现半透明bug

IE环境下，当页面内容元素众多时，可能触发dialog组件弹出框的动画卡顿，导致半透明。

解决方法

<el-dialog
      :visible.sync="isShowNew"
></el-dialog>

监听触发visible变化的传入值，一段延迟之后再为visible 赋值

watchElDialog(val,prop
最低0.47元/天 解锁文章
【css】el-dialog弹出框底色改变
栀妹儿的炼丹炉
07-28 2237
弹出框底色变透明：background-color <el-dialog> <div>....</div> </el-dialog> .el-dialog{ width: 30%; background-color: rgb(0,38,141,0.36) !important; border: solid #77f8ef; } 底色变自写样式：background-image // 例如中心辐射 .el-dialog{
遮罩层弹出半透明dialog
02-27
遮罩层弹出半透明dialog,很fashion。
Dialog背景半透明
04-03 4330
false true true true @android:color/transparent #FFFFFF styles文件 在代码中应用 Dialog choose = new Dialog(MainActivity.this,R.style.draw_dialog);
element透明弹窗
PEACEMINUSON的博客
01-05 1039
【代码】element透明弹窗。
dialog设置 背景透明
user_86的博客
04-18 1074
先看一下效果：布局很简单，background 设置为透明就行。代码也很简单，其中最主要的就是：mDialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);下面是完整代码AlertDialog.Builder builder = new AlertDialog.Builder(Context); Vi...
dialog设置背景透明
uwei的博客
09-04 8956
默认dialog是一个白底方形的，如果在xml设置中设置了一种边角是弧形的背景图片，那么显现的dialog角落就会留白 ，解决办法： dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent); 效果：只会显示你设置的圆弧形的背景图，dialog四角不会留白。 ...
el-dialog跳转后出现透明黑屏解决
企业数字化转型卫淼全栈技术工作室
04-29 1329
el-dialog跳转后出现透明黑屏解决，排查后发现是弹出框组件的bug。 解决方案：跳转的时候关闭掉弹出框。
父页面显示遮罩层弹出半透明状态的dialog
09-04
本文为大家介绍下父页面显示遮罩层，弹出半透明状态的dialog。dialog即弹出的子页面,需要的朋友可以参考下
模式对话框Dialog背景的透明度&黑暗度设置方法
crane
08-08 2333
设置透明度（貌似是dialog自身的透明度） WindowManager.LayoutParams lp=dialog.getWindow().getAttributes();                  lp.alpha=1.0f;
Android 设置dialog背景全透明无边框的最简单的方法
10-31 359
做dialog的全透明无边框背景，网上找了n久，都有问题，其实很简单，就两句搞定。 <style name="Translucent_NoTitle" parent="android:style/Theme.Dialog"> <item name="android:background">#00000000</item> <!-- 设...
Dialog整个窗体背景设置为透明
god2030的博客
08-25 9739
@android:color/transparent true true 关键是最后一个属性android:backgroundDimEnabled设置为true时候，整个Dialog的大背景就是半透明的黑色，如果设置为false就是全透明！
Dialog背景透明无边框
Slowing down your step，you will enjoy more
06-26 1349
@null true true false @color/transparent背景透明 @color/transparent false 在Dialog 构造函数中 public WindowListDialog(Context context, int theme) { s
Element UI表格和弹出层背景透明
LoveZJC96的博客
07-01 3893
弹出层想自定义头部，可以是用插槽slot，如下面代码第三行。如想element 中的table要背景透明，可以让则需要让背景，行和行对应的每一个单元格都透明。HTML代码： less代码： 效果如下： 能看出背景已经透明了...
解决element-plus的el-dialog弹出框的时候会多出width:calc(100% - 8px)问题
m0_74545388的博客
05-23 1003
打开会莫名其妙的el-dinalog出现位移，并且body上出现 style="width:calc(100% - 8px)"只要加上:lock-scroll="false"即可,在官网上是这样写的。只要设置为false即可。
Dialog 背景透明及显示位置设置
cxlmax的专栏
04-10 702
代码如下：   1、自定义Dialog   public class SelectDialog extends AlertDialog{ public SelectDialog(Context context, int theme) {     super(context, theme); } public SelectDialog(Context context) {
【element】谷歌浏览器 el-dialog 概率出现背景全黑，透明度不生效
qq_42925191的博客
06-13 1557
谷歌浏览器谷歌浏览器 el-dialog 概率出现背景全黑，透明度不生效 class v-modal opacity:0.5 不生效采用 opacity: 1 background: 0.5透明度的黑色 代码如下： End
Element-UI之el-dialog弹框无法在IE中展示解决方案
liuhailong2014的博客
09-27 465
经过排查和探索，发现是el-dialog有两个属性导致的，:show-close="false"和:close-on-click-modal="false"，作用请官网冲浪，去掉这俩后恢复正常，我。今天在开发的时候，测试人员突然告知某个页面的弹框在IE浏览器中无法正常弹出，第一反应就是：什么年代了，居然用IE。
安卓如何将自定义dialog布局主背景设置为透明色
lzfengluo的博客
02-15 2842
安卓开发设置布局背景为透明色问题描述解决方法简单总结 问题描述 昨天在安卓开发的时候，有个需求是让我把弹出的dialog对话框的关闭按钮放在内容背景外面，就是下图那种，我首先想到的就是，把背景变成透明的，再把内容部分填充上背景颜色，按钮就可以看起来像是独立出去了，事实证明我这种想法是可行的。 但是当我实现背景透明的时候，却遇到了问题，在百度上查了一大圈得到的解决方法都是将布局的背景色设置为&amp;amp;quot;#00...
在vue2和element-ui组件中设置el-dialog的样式
最新发布
10-19
在 Vue2 中使用 Element UI 的 `ElDialog` 组件时，如果你想自定义其样式，可以通过在 CSS 文件中添加样式或者直接在组件的模板上使用 `style` 标签来覆盖默认样式。以下是两个常见的做法： 1. **全局样式** (推荐): 如果你想让整个应用都生效，可以在项目的全局 CSS 文件（如 `main.css` 或 `app.scss`) 中编写规则，例如： ```css .el-dialog { /* 定义新的背景颜色、边框等 */ background-color: #f5f5f5; border-width: 1px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* 或者针对特定大小的dialog */ .el-dialog--small { width: 30%; /* 修改小尺寸对话框的宽度 */ } ``` 2. **局部样式**: 如果只对某个 `ElDialog` 实例进行定制，可以将上述CSS规则放在该组件的样式标签中： ```html <template> <el-dialog :style="{ backgroundColor: '#your-color', width: '30%' }" title="标题"> <!-- 内容 --> </el-dialog> </template> <script> export default { // ... }; </script> ``` 在以上例子中，`:style` 属性允许你在运行时动态绑定 CSS 规则。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值