vue element UI Dialog 蒙版在dialog上面 和 点击X和 esc 不关闭dialog问题

最新推荐文章于 2024-08-08 21:56:00 发布
最新推荐文章于 2024-08-08 21:56:00 发布
阅读量1.6k 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40948380/article/details/104585838
版权

Dialog 的父组件的 position 值为 fixed或absolute或 relative 时，就会出现被蒙板遮住Dialog的情况。

例如父组件样式如下：

position : fixed

点击X和 esc 不关闭dialog问题

错误写法

:visible="centerDialogVisible"

正确写法，千万别忘记sync修饰符

:visible.sync="centerDialogVisible"
yank1n9
关注
专栏目录
【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？
椰卤工程师的个人博客
07-06 3938
到底是什么问题？ 没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。 下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto
element ui 两个模态框嵌套问题
weixin_44348028的博客
09-22 1354
将第二个模态框做成组件进行弹出是，需要加上append-to-body属性就可以解决蒙版问题 父-模态框 <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> //..... <eldialogson></eldialogson>//子组件模态框 </el-dialog> 子-模态框 <el-dia
Dialog里监听ESC按键事件
ycb1689的专栏
06-21 1226
一个JDialog，焦点在任何控件上的时候，当ESC按键或其他键事件发生时，想关闭这个窗口，或者激活别的事件的方法。在直接用JDialog时，用addKeyListener方法添加对键盘事件的监听，发现现不能监听到ESC事件。这里继承JDialog 覆盖父类的createRootPane()方法，添加对键盘ESC的监听。当然也可以实现对其他键盘的监听。 示例代码如下： package co
Android Alert Dialog解决点击按钮对话框不关闭的问题
xSTARx
12-15 176
  推荐安卓开发神器（里面有各种UI特效和android代码库实例） 当我们在用到Android alertDialog创建对话框 的时候，我们会遇到一个问题就是：我们添加的按钮不论是用setNegativeButton还是用setPositiveButton添加的按钮，点击的时候，都会关闭对话框，但是我们的一 些实际需求，就需要保留这个对话框不动，例如输入校验码，密码之类的校验问题，如果用...
element-ui 蒙版在el-dialog上面解决办法
最新发布
weixin_45011156的博客
08-08 343
:append-to-body="true"
element-UI el-dialog组件按ESC键关闭不了弹窗
Jana Jing的分享
12-07 5631
我的代码 <el-dialog :visible.sync="isShow" :modal="false"></el-dialog> 点击“Esc”按键无法关闭弹窗,然后在官方例子中是可以按Esc关闭弹窗, 去查看官方文档,如下: close-on-press-escape默认为“true” ,百思不得其解 之后代码改为: <el-dialog :visible.sync="isShow" :modal="false" append-to-body>&
element-ui dialog弹出层点击空白、ESC不关闭弹出框
network_liuxu的博客
09-29 1248
element-ui dialog弹出层点击空白、ESC不关闭弹出框
elementUI dialog点击页面会跳动
weixin_44994372的博客
12-12 1236
原因是dialog出现的时候，dialog的遮罩层把原来页面上的滚动条挡住了，在css中可以看出，原来css中 body{ padding-right:17px; } 当dialog出现的时候，页面右边的滚动条会消失，以至于页面会跳动一下，所以解决方法是在全局的css里设置下body的右padding，让他无论在什么情况下，都是0；具体设置如下 body{ padding-right:0!i...
element中一个dialog中嵌套另一个diaolog，导致遮罩层覆盖在弹出层上面
Hanxiaomo_的博客
12-28 1111
在项目中遇到在弹出弹窗时，弹窗上面有一层v-modal的遮罩层，需要把遮罩层点掉才能进入弹窗。 这是因为这个弹窗是写在另一个弹窗里面的，也就是此dialog是放在当前组件下的，将其放在body下就能解决问题,具体操作就是在 el-dialog 上添加 :append-to-body=“true”。 在element官网也有对此问题的声明 ...
自定义 Dialog 加载进度,去除自定义Dialog的白色背景
shanshan_1117的博客
09-13 1226
去除自定义Dialog的白色背景: mDialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent); 这句话就可以了,一定要记得 在show()前加; 下面附上完整代码: public class MyProgressDialog { private static Dialog mDial...
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=
element遮罩_如何实现全屏遮罩（附Vue.extend和el-message源码学习）
weixin_39969060的博客
12-19 1807
[Vue]如何实现全屏遮罩(附Vue.extend和el-message源码学习)在做个人项目的时候需要做一个类似于电子相册浏览的控件，实现过程中首先要实现全局遮罩，结合自己的思路并阅读了(饿了么)element-ui中el-message的实现，来总结一下Vue中比较好的一种全局遮罩的实现方式。调用遮罩的方式一般由两种写法：1.(类似el-dialog的一种写法)在html文件中写好结构，控制元...
element-ui禁止通过点击 modal 和按下 ESC关闭 Dialog
qq_42243957的博客
11-07 3246
el-dialog点击右上角的×关闭，会报错
farmss的博客
11-02 1805
el-dialog点击右上角的×关闭，会报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show" <div> <el-di.
el-dialog关闭属性
18岁的蛋蛋博客
08-19 2585
:close-on-press-escape="false" :close-on-click-modal="false" 效果：键盘按Esc键，或者鼠标点击dialog外面， dialog都不会关闭了。
element-ui 弹窗框 X点击不能取消
qq_57980267的博客
03-08 3651
在做项目过程中，弹窗框的运用不少于表格表单，今天就在写弹窗的时候出现了bug，点击弹窗的X不能关闭，其实很简单 :before-close="handleClosee" :before-close 关闭前的回调，会暂停 Dialog 的关闭, 加上这个方法，这样这个问题就解决了。 ...
el-dialog遇到的问题
qq_37120809的博客
12-15 2232
3.改上面的问题，把dialog组件自带的关闭按钮去掉了，属性 ：show-close="false"，我下意识想写成（show-close="false"但是会报错），测试又发现新问题：点击取消按钮可以清空form表单里原来的内容，但是点击空白处对话框也会关闭，此时里面内容不会清空；5.遗留问题：在el-table组件中点击编辑回显到dialog弹框里时，修改某条信息但不保存，关闭对话框后，table表格里的信息是修改后的，需要刷新后才能拿回真实的数据，目前是关闭对话框后重新调取接口；
vue element Dialog 蒙板的覆盖页面
weixin_45422787的博客
07-27 595
明显看到蒙板的z-index把app给盖掉了 解决办法： 在弹框属性上面加这个属性和值就可以解决，这个是element提供的解决方法
Vue Element UI dialog组件 点击确认时调用其他方法以及组件如何调整
06-09
对于Vue Element UI的dialog组件，可以通过给确认按钮绑定一个方法，来实现点击确认时调用其他方法的功能。例如： ```html <template> <div> <el-button @click="showDialog">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="false" > <span>确定要执行吗？</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleConfirm">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false }; }, methods: { showDialog() { this.dialogVisible = true; }, handleConfirm() { // 在这里调用其他方法 console.log('执行其他方法'); // 关闭对话框 this.dialogVisible = false; } } }; </script> ``` 上面的代码中，给确认按钮绑定了一个名为`handleConfirm`的方法，当用户点击确认按钮时，会调用`handleConfirm`方法。在`handleConfirm`方法中，可以调用其他方法来实现需要的功能。 至于组件如何调整，具体要看你的需求。如果是需要调整dialog组件的样式和布局，可以通过修改Element UI的样式文件来实现。如果是需要添加其他功能，可以在组件的methods选项中添加对应的方法。如果是需要修改组件的props属性，可以在组件的props选项中进行修改。总之，要根据具体的需求来进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值