vue+elementUI：el-dialog弹出框被遮罩层覆盖及关闭后数据没有清空

最新推荐文章于 2024-05-27 09:30:11 发布
最新推荐文章于 2024-05-27 09:30:11 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： vue+element-ui 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Maanqi_1214/article/details/115077442
版权

1.el-dialog弹出框被遮罩层覆盖

解决方法：在el-dialog标签里添加 :modal-append-to-body='false’

<el-dialog id="forget-pwd" title="重置密码"  :visible.sync="fpwdVisible" width="80%" destroy-on-close :modal-append-to-body
最低0.47元/天 解锁文章
Maanqi_1214
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue设置弹出框不消失_Vue弹出框的优雅实践
weixin_30394975的博客
01-26 1831
引言页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种做法的弊端. @click="openModal()">点击 :is_open="is_open" @close="close()"/> import Modal from "....
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的压缩功能，特别是在用户上传大尺寸图片时，确保前端能够处理并优化图片大小，减轻服务器负担。以下是一步步实现这个功能的...
Vue3中点击关闭按钮后清除 el-table 表单内容
最新发布
李长渊的博客
05-27 1327
Vue3中点击关闭按钮后清除 el-table 表单内容
修改组件el-dialog点击取消数据无法销毁
m0_47733490的博客
08-30 1364
修改弹窗点开，随意输入修改内容后，点击取消不刷新页面的情况下，再点开编辑弹窗，之前修改的内容还在，弹窗关闭的时候并不会销毁页面的元素 解决思路（不生效）：elementui有 destroy-on-close 属性，但在本页面不生效，还需其他解决办法 解决方法：给el-dialog标签加一个@open事件，打开的回调 具体代码： 问题解决 ...
element dialog messageBox 点击遮罩层不消失 全局配置
weixin_40624809的博客
09-09 1195
// dialog Element.Dialog.props.closeOnClickModal.default = false // MessageBox Element.MessageBox.setDefaults({ closeOnClickModal: false })
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
穆雄雄的博客
05-05 6433
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂 前言 现在是2022年5月5日22:48:21！ 今天在使用element-ui中的el-dialog的时候遇到了个这样的问题：页面上点击添加的按钮，弹出el-dialog对话框，该对话框中有个添加表单的子组件，然后填写值进行保存，点击保存按钮之后，el-dialog框关闭。继续点击添加的按钮，el-dialog框继续弹出，但是上次填写的表单内容没有清空。 图如下： 大致就是图上的意思。 实现思路 一开始我和同事想的是表单没有清空，于是我们就开..
项目中遇到的问题---vue+element对话框关闭后重新打开数据不清空
热门推荐
weixin_41807530的博客
11-23 1万+
解决方法： 1、 &lt;el-dialog title="提示" :visible.sync="channelBox" size="tiny" :before-close="closeImport "&gt; &lt;span&gt;这是一段信息&lt;/span&gt; &lt;span slot="footer" cl
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue+ElementUI使用vue-pdf实现预览功能
10-15
主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
vue实现弹框遮罩, 点击其他区域弹框关闭, v-if与v-show的区别
哈士奇
09-29 1万+
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展 v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在; 实现如下 maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关...
element表单- 弹出层，点击背景遮罩层，不要关窗口，好不容易创建的数据，就丢失了
鱼儿的博客
11-19 1571
方法一： 局部控制:before-close <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>这是一段信息</span> <span slot="footer" class...
解决vue弹窗被遮罩层遮挡和关闭弹窗后遮罩层不消失的两个问题
weixin_55966654的博客
12-05 7491
（1）弹窗被遮罩层被遮罩层遮挡问题； （2）关闭弹窗后，遮罩层不关闭问题；
vue关闭el-dialog弹窗销毁dom、数据（有效版）
两眼一睁 神志不清
07-02 5260
vue中关闭el-dialog时，再次打开新增页面上次的数据不会销毁，如何解决： 最基本的使用v-if <el-dialog class="detail" v-if="visible" :title="title" :close-on-click-modal="false" :visible.sync="visible" @close="closed"> js closed() { this.visible = false; this.isPass.
el-dialog关闭和取消中值不重置的问题
qq_38630106的博客
06-02 436
element-ui的dialog对话框
解决vue和el-dialog的遮罩层消失
子非渔
11-04 5121
解决vue和element UI中对话框的遮罩层消失，在el-dialog标签里添加 :modal-append-to-body=‘false’ 错误分析 1）若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） 2）el-dialog的显示层和遮罩层都设置了position:...
解决 element-ui 中From 表单和Dialog 对话框搭配使用时 resetFields重置方法无法清空数据的问题
be_stuck_up的博客
12-29 1819
【代码】解决 element-ui 中From 表单和Dialog 对话框搭配使用时 resetFields重置方法无法清空数据的问题。
vue里el-dialog关闭或取消未保存数据修改表格问题解决
weixin_44953664的博客
04-21 2422
最近碰到关闭或者取消表格数据，表格操作里有“编辑”按钮，点击编辑，未保存的数据却修改了表格这一行的数据，或者下一行，下一行也会被修改为前面未保存的数据，完美的解决办法： 如果点击编辑按钮，把数据填充到了scope,则： this.test = JSON.parse(JSON.stringify(scope.row)) 只需一句话在el-dialog关闭或者取消时，未保存的数据都不会修改表...
el-dialog框怎么清空数据
05-27
如果你是指在Vue.js中使用`el-dialog`组件时如何清空对话框中的数据，那么你可以使用以下方法： 首先，在对话框组件中，你可以定义一个`data`属性，用于保存对话框中的数据： ```vue <template> <el-dialog title="对话框" :visible.sync="dialogVisible"> <el-form :model="form"> <el-form-item label="输入框"> <el-input v-model="form.input"></el-input> </el-form-item> <el-form-item label="文本域"> <el-input type="textarea" v-model="form.textarea"></el-input> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">关闭</el-button> <el-button type="primary" @click="submitForm">提交</el-button> </div> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, form: { input: '', textarea: '' } } }, methods: { submitForm() { // 处理表单提交逻辑 } } } </script> ``` 在上面的代码中，`form` 对象存储了对话框中的所有数据。当你点击提交按钮时，可以将这些数据传递到后端进行处理。 如果你想要在关闭对话框时清空对话框中的数据，可以在对话框组件的`beforeClose`事件中重置`form`对象： ```vue <el-dialog title="对话框" :visible.sync="dialogVisible" @before-close="resetForm"> ... </el-dialog> <script> export default { ... methods: { resetForm(done) { this.form = { input: '', textarea: '' }; done(); // 必须调用 done() 方法关闭对话框 } } } </script> ``` 在上面的代码中，`resetForm` 方法将`form`对象重置为空，然后必须调用`done()`方法，以便关闭对话框。这样，在下一次打开对话框时，表单数据就会被清空了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值