element-ui 中使用Dialog 对话框 点击非对话框区域设置对话框不关闭

最新推荐文章于 2023-07-02 01:52:29 发布
最新推荐文章于 2023-07-02 01:52:29 发布
阅读量488 收藏 1
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Z2017512/article/details/119886559
版权

element-ui Dialog 对话框 默认的点击非弹窗区会关闭，有时候感觉太美（蹩脚），所以要设置为不可关闭，本身自带该属性即可实现

在这里插入图片描述

        <el-dialog title="锁定岗位" :close-on-click-modal="false" > </el-dialog>

:close-on-click-modal=“false” 设置为false即可实现

选择与努力
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Flutter】如何 Dialog 弹窗设置点击空白处不关闭
Code Metaverse
06-14 2093
Dialog 是一个常见的 UI 元素，它可以用于显示信息、询问问题或收集用户输入。
vue实现element-ui对话框可拖拽功能
10-18
主要介绍了vue实现element-ui对话框可拖拽功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
点击非弹出框以外区域则隐藏弹出框
weixin_33681778的博客
04-23 249
//点击非弹出框以外区域则隐藏弹出框 $('body').click(function(e) { if(e.target.id != 'chat-main') if($('#chat-main-new').is(':visible')) { //隐藏区域 $('#chat-ma...
Element ui —— dialog 弹窗 设置点击空白处不关闭
蜡笔小星的博客
01-18 7193
element-ui 的dialog弹窗 ，默认的点击空白处也就是非弹窗区会关闭，有时候不太合适，所以要设置为不可关闭，它本身自带该功能： 把这个属性设置为false即可 <el-dialog title="添加" :visible.sync="dialogFormVisible" :close-on-click-modal="false"> </el-dialog> ...
elementui中el-dialog模态与非模态的研究
qq_39163732的博客
01-12 6730
el-dialog模态与非模态的研究 模式对话框就是不处理它就没法处理父窗口,而非模式对话框就是不用先处理此对话框也可以处理父窗口 在单页面应用中往往因为某个vue弹窗被打开而导致不得不处理或关闭它才能选择打开其他vue，这是将对话框设置为模态对话框所导致，模态对话框必须首先执行。 在实际操作中，对于Vue+elementui架构，其中的el-dialog默认为模态，当对话框被打开时，会出现遮罩层，使其无法操作，为了研究el-dialog是否可以设置为非模态，可以进行如下操作。 1. 设计测试页面 如图所
element plus的dialog组件如何实现不关闭窗口时正常操作其他区域Dom
最新发布
cty1897的博客
07-02 1936
实现在不关闭对话框的情况下，正常操作其他区域的Dom；element plus的dialog组件的modal属性可以关闭灰色遮罩层, 但仍然无法操作其他区域的Dom;因为dialog除了model以外还存在着透明的遮罩层, 导致我们无法操作其他区域的Dom;
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
1. **使用`v-if`指令**：将`el-dialog`包裹在`v-if`中，确保在对话框关闭时，整个组件树会被销毁，从而避免校验状态的保留。但是，这种方法可能导致对话框的即时显示性能下降，因为它需要重新渲染整个组件。 2. **...
vue-element-dialog-drag:支持ElementUI对话框拖动
04-28
Vue元素对话框拖动支持ElementUI对话框拖动用法npm install vue - element - dialog - draggable -- saveimport DlgDraggable from "vue-element-dialog-draggable"Vue . use ( DlgDraggable , { containment : true...
element ui 对话框el-dialog关闭事件详解
08-27
在上面的例子中，`closeDialog` 方法会在对话框关闭时被调用，`this.xxx = ''` 将指定的数据属性清空。你可以根据实际情况将 `xxx` 替换为你需要清空的任何数据属性。 ### 3. 自定义关闭动作 除了简单的清空数据，...
element-ui中dialog弹窗关闭按钮失效的解决
01-18
如下所示： 修改库存 visible.sync=kcDialog close=kcDialog> ... 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识：webpack外部扩展，依赖前置 引入了外部js ... ... integrity=sha256-slogkvB1K3...
el-dialog(对话框)入门学习
热门推荐
qq_40765784的博客
06-24 4万+
el-dialog的入门学习
el-dialog中点击之外的区域不关闭弹窗
BADAO_LIUMANG_QIZHI的博客
03-30 5902
场景 在页面上显示一个dialog，如果显示的时候点击了弹窗之外的区域则会将dialog关闭。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、设置dialogde elementUi在对Dialog组件做初始化的时候，默认让该Dialog在点击组件以外区域会导致该组件关闭， Dialog下有个‘close-on-click-modal’属性，该属性默认..
element-ui 对话框中嵌套对话框及其遮罩层关闭问题
chpswg的专栏
09-07 3838
1、经常会遇到对话框中打开对话框，主要是两个对话框均设置:append-to-body="true" 父组件对话框 父组件中引入子组件 子组件中对话框设置 运行后 这样即使是多个对话框逐层嵌套都可以。 注意的是，在子组件中千万不能输入:modal-append-to-body="false"，否则，当子组件关闭时，所有对话框的遮罩层都会被关闭，变成了没有遮罩层，如下图两层对话框关闭子对话框后，父组件的遮罩层同时也被关闭了 下图第三层对话框关闭后，父组件和父组...
Jquery点击非目标弹窗区域关闭弹窗简洁代码
追风2019
04-25 2158
        在写网页功能交互时，经常会用到弹窗，但是用户常常希望用完弹窗里的功能后，弹窗可以自动隐藏，因此，学会使用一个隐藏弹框的js特效，是非常有必要的。        我们希望的是，我们再操作弹窗（点击或聚焦在弹窗的范围内）时，弹窗可以保持，操作弹窗之外的区域时，弹窗自动消失。代码如下：(document).mouseup(function(e) {     var _con = $(' ...
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面 解决方法
Fxhani的博客
03-26 2527
关于element 里 Dialog 对话框 组件 遇到的问题 element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面 造成的原因： 因为dialog的组件外层div设置了 position：absolute； 属性所以导致遮罩层会在最上面。 解决方法： 1. 在属性内加上这段代码 :append-to-body=“true” ； 2 ，:modal-append-to-b...
element-UI 弹出外部组件
wcdunf的博客
04-27 7079
宝贵的开发经验，请加倍珍惜！因为整个百度，可能只有我发现并解决了这个问题。 本次弹框以“弹出表格为例”。 看效果图： 看代码： StuAndCou.vue <el-button @click="addStudent" type="success" round icon="el-icon-check">添加学生</el-butto...
ElementUI el-dialog组件点击dialog外的其他区域会导致该对话框关闭
银河刨冰的博客
04-22 2267
解决办法： 将el-dialog组件中的close-on-click-modal设置为false即可。但是特别要注意的一点是必须在close-on-click-modal加上：才可以。
vue学习之elementUI组件之对话框点击空白处不关闭
King的博客
10-02 5797
需求场景： 使用elementUI组件时默认点击对话框外的空白处是会关闭对话框的，现在想要实现点击空白处不关闭！ 问题解决： 使用官方文档提供的属性：close-on-click-modal 注意：这里的modal指的是遮罩层！！ 默认点击遮罩层是可以关闭的，只需要设置成false即可。 <el-dialog title="编辑" :close-on-click-modal="false"></el-dialog> ...
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` 安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例： ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible"> <span>这是一个对话框</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } } } </script> ``` 在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。 这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

选择与努力

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值