element弹框点击空白处不关闭

最新推荐文章于 2024-05-11 15:03:18 发布
最新推荐文章于 2024-05-11 15:03:18 发布
阅读量257 收藏
点赞数 1
分类专栏： Element 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuyu_2019/article/details/128562401
版权 
:close-on-click-modal="false"
yuyu_2019
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中仿element-ui弹框效果的实例代码
12-01
在Vue项目中，为了实现类似Element UI的弹框效果，我们可以参考其源码并自定义一个组件。Element UI的弹框（Message）组件是用于显示警告、信息、成功或错误消息的快速提示，且具有可定制的样式和行为。下面我们将...
vue通过指令(directives)实现点击空白处收起下拉框
10-17
要实现点击空白处收起下拉框的效果，我们可以创建一个名为`v-click-outside`的自定义指令。在`bind`钩子中，我们需要为元素添加一个事件监听器，该监听器会在整个文档上捕获点击事件。如果点击事件的目标不在下拉框...
element Drawer 抽屉点击空白全局不允许关闭修改 el-dialog 默认点击遮照为不关闭\全局设置点击遮罩层不关闭 Dialog
看到我在玩请叫我去敲代码的博客
03-21 1763
element Drawer 抽屉点击空白全局不允许关闭修改 el-dialog 默认点击遮照为不关闭\全局设置点击遮罩层不关闭 Dialog
element-ui dialog弹出层点击空白、ESC不关闭弹出框
network_liuxu的博客
09-29 1182
element-ui dialog弹出层点击空白、ESC不关闭弹出框
点击el-drawer抽屉之外关闭问题
coinisi_li的博客
05-08 373
遇到问题el-drawer抽屉点击空白处会关闭，与el-dialog类似。
el-draw抽屉禁止点击空白区域关闭
weixin_47673852的博客
05-29 2448
el-draw抽屉禁止点击空白区域关闭及不展示标题title
el-popover嵌套时，打开内部的popover后，点击外部popover的空白部分无法将内部popover关闭
weixin_43641912的博客
04-20 2330
那么这时候就遇到了一个问题，每次点击一个新的弹框，之前打开的弹框不会关闭，而且点击弹框以外的其他空白部分弹框也关不了，这个问题怎么解决呢？解决弹框无法正常关闭的总体思路就是使用它自带的doClose()方法，至于为什么会造成这种弹框无法关闭的现象，我也不太清楚，下边是我的大致解决过程。1、首先给每一个弹框一个独一无二的ref(也可以给他们统一的ref，我感觉我这里不适合使用统一的解决，就用了下面的方法)2、点击按钮获取对应的子组件，阻止冒泡，并获取到所有的popover。获取所有的popover的函数。
Element MessageBox弹框的具体使用
10-15
主要介绍了Element MessageBox弹框的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
总结来说，实现Vue+Element UI点击表格单元格触发事件并弹出对话框的关键在于使用`template`和`scope`插槽来定制表格列，以及Element UI提供的组件如`el-popover`来创建弹框。通过这种方式，我们可以灵活地控制表格...
DrawerLayout去除阴影，阴影部分点击不关闭抽屉并可以触发相关view，抽屉侧滑可响应关闭
07-03
DrawerLayout去除阴影，阴影部分点击不关闭抽屉并可以触发相关view，抽屉侧滑可响应关闭
element-plus 工作经验总结
最新发布
汤一飞
05-11 800
项目中遇到的 element-plus 相关问题经验总结
Element ui —— dialog 弹窗 设置点击空白处不关闭
蜡笔小星的博客
01-18 7165
element-ui 的dialog弹窗 ，默认的点击空白处也就是非弹窗区会关闭，有时候不太合适，所以要设置为不可关闭，它本身自带该功能： 把这个属性设置为false即可 <el-dialog title="添加" :visible.sync="dialogFormVisible" :close-on-click-modal="false"> </el-dialog> ...
解决el-image只能点击关闭按钮才能关闭的问题
chenZH0975的博客
09-13 2742
​问题：el-image打开图片预览时，只能点击关闭按钮才能关闭 需求：点击其他地方，方可关闭图片预览 el-image是elementUi里的一个组件，介绍可以直接去element官网查，在这里就不多介绍了 而这里最重要的也就是这个handleClickStop方法了，@click.stop点击调用方法关闭 这样就完成了el-image点击蒙版也可以关闭的操作了
前端开发踩坑笔记（2022-08）
一只洒鹿
08-11 2059
例子： 上面的例子中是修改table中的某一行的状态，账户id为1的时候此行的状态不可修改，active-value和inactive-value的两种书写方式，加冒号的书写方式代表的是当v-model为1（数字）的时候开关打开，为0（数字）的时候开关关闭；不加冒号的书写方式代表当v-model为1（字符串）的时候开关打开，为0（字符串）的时候开关关闭。el-drawer嵌套el-dialog的bug 当el-dialog关闭之后，el-drawer的遮罩层不消失，导致页面没办法点击 解决： 对Drawer
element ui点击空白处不关闭弹框 el-dialog
————————————————————————————————
12-17 492
el-dialog默认点击空白处也会关闭弹框 它本身自带这样一个功能 “:close-on-click-modal” 想要关闭这个功能只需要在标签上加这个属性就可以了 <el-dialog title="弹框" :visible.sync="dialogFormVisible" :close-on-click-modal="false"> </el-dialog> ...
vue学习之elementUI组件之对话框点击空白处不关闭
King的博客
10-02 5774
需求场景： 使用elementUI组件时默认点击对话框外的空白处是会关闭对话框的，现在想要实现点击空白处不关闭！ 问题解决： 使用官方文档提供的属性：close-on-click-modal 注意：这里的modal指的是遮罩层！！ 默认点击遮罩层是可以关闭的，只需要设置成false即可。 <el-dialog title="编辑" :close-on-click-modal="false"></el-dialog> ...
vue-element弹框和表单相结合
06-07
可以使用 Vue.js 和 Element UI 库来实现弹框和表单的结合。具体步骤如下： 1. 在 Vue.js 中引入 Element UI 库，可以使用 npm 或者直接在 HTML 页面中引入。 2. 创建一个包含表单的弹框组件，可以使用 Element UI 中的 Dialog 组件作为弹框容器，使用 Form 组件作为表单容器。 3. 在弹框组件中定义表单的数据模型和验证规则，可以使用 Vue.js 中的 data 和 rules 属性。 4. 在弹框组件中使用 Element UI 中的 Input、Select 等组件来实现表单项。 5. 在弹框组件中定义保存表单数据的方法，可以使用 Vue.js 中的 methods 属性，通过调用后端接口将数据保存到数据库中。 6. 在需要弹出表单的地方，可以使用 Element UI 中的 Button 组件，在点击事件中调用弹框组件来显示弹框。 示例代码如下： ```html <template> <el-button type="primary" @click="showDialog">添加</el-button> <el-dialog title="添加用户" :visible.sync="dialogVisible"> <el-form :model="form" :rules="rules" ref="form" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item label="性别" prop="gender"> <el-select v-model="form.gender"> <el-option label="男" value="male"></el-option> <el-option label="女" value="female"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="saveForm">保存</el-button> </div> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, form: { name: '', age: '', gender: '' }, rules: { name: [ { required: true, message: '姓名不能为空', trigger: 'blur' } ], age: [ { required: true, message: '年龄不能为空', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字', trigger: 'blur' }, { min: 1, max: 150, message: '年龄范围为1~150岁', trigger: 'blur' } ], gender: [ { required: true, message: '性别不能为空', trigger: 'blur' } ] } } }, methods: { showDialog() { this.dialogVisible = true; }, saveForm() { this.$refs.form.validate(valid => { if (valid) { // 调用后端接口保存表单数据 console.log('保存表单数据', this.form); this.dialogVisible = false; } else { console.log('表单验证失败'); } }); } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值