vue学习之elementUI组件之对话框点击空白处不关闭

最新推荐文章于 2024-06-27 08:20:19 发布
最新推荐文章于 2024-06-27 08:20:19 发布
阅读量5.7k 收藏 9
点赞数 5
分类专栏： vue学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42566993/article/details/108905945
版权

需求场景： 使用elementUI组件时默认点击对话框外的空白处是会关闭对话框的，现在想要实现点击空白处不关闭！

问题解决：

在这里插入图片描述
使用官方文档提供的属性：close-on-click-modal
注意：这里的modal指的是遮罩层！！
默认点击遮罩层是可以关闭的，只需要设置成false即可。

<el-dialog title="编辑" :close-on-click-modal="false"></el-dialog>
King_960725
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
解决VUE项目使用Element-ui 下拉组件的验证失效问题
01-18
问题描述： 在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的, 这样也没有问题,但是如果加上multiple属性,也就是可以多选 就会出现下拉框验证时失效问题. 问题现象： 如图所示,明明已经选择了选项,可是验证还是为空,因此不能提交请求 解决思路： 如果说找遍组件里的方法都无法获得我们适合使用的,那就要动用原生基本功了 console.log一下v-model在此组件上绑定的属性,你发现你绑定的字符串(一般情况下都是String,这里就拿字符串举例说明)打印出来却是Array 所以如果验证必填的话我们就直接判断v-
Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目
07-12
在“Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目”中，我们利用Vue.js的这一特性，实现了登录表单的验证功能。这涉及到Vue的v-model指令用于双向数据绑定，以及自定义事件来处理表单提交和验证逻辑。 ...
Vue 使用elementUI 使用select下拉框和日期框，点击空白处下拉框和日期框不消失
helei1314的博客
03-26 3551
Vue 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引
Popover 点击空白区域如何消失
最新发布
qq_42931285的博客
06-27 162
Popover 点击空白区域如何消失
vuetify v-select 展开后 点击空白处不消失以及其他组件不起作用的解决办法
qq_28059167的博客
03-17 594
vuetify v-select 展开后 点击空白处不消失以及其他组件不起作用的解决办法 在最外层盒子加上data-app=“true” <template> <div class="box" data-app="true"> <v-select> </v-select> </div> </template> 至于为什么 我也不是很清楚，可能是 加上这个 vuetify才能找到这个元素吧 ...
element ui中的el-dropdown（下拉框）防止点一下就影藏的问题
qq_42208679的博客
12-24 2919
element ui中的el-dropdown（下拉框）防止点一下就影藏的问题 当使用el-dropdown下拉框时，下拉框的每项中，可能需要加入@click、@change或复选框等事件，而el-dropdown-item的事件触发时，el-dropdown下拉框总是会收缩，很不合理。 官网 <el-dropdown trigger="click" placement="left"> <span class="el-dropdown-link"> <button
element dropdown 点击隐藏
qq_33362637的博客
11-29 2569
查询不出官方有什么方法 只能使用jq方法进行隐藏 $(".class").hide();
vue3+ElementUI 图片素材管理组件
10-21
Vue3作为Vue.js的最新版本，引入了许多性能优化和新特性，而ElementUI则是一个基于Vue2的组件库，但在Vue3中也能通过适配器正常工作。在"vue3+ElementUI 图片素材管理组件"这个项目中，我们将深入探讨如何利用这两者...
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
本文将详细讲解如何在Vue+ElementUI环境中解决这个问题，即在关闭对话框时清空验证和清除表单数据。 首先，我们需要在对话框的取消按钮上添加一个点击事件，例如： ```html ('addGroupData')">取消 ('...
vue中使用elementUI组件手动上传图片功能
10-15
Vue是一套构建用户界面的框架， 开发只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
dropdown-menu 单击不消失实现方式
Web魔法师
01-23 5527
dropdown-menu一单击就会消失，不能实现输入等操作，需要为dropdown-menu进行控制，下面的stop方法实现了dropdown-menu单击不消失的效果，很方便。 //调用stop() $scope.stop=function(){     event.stopPropagation(); }; 调整菜单位置 可以向.dropdown-menu
ivewUI框架DatePicker点击空白区弹框收起
Cinderellahh92的博客
11-16 1085
今天遇到一个问题就是，DatePicker组件点击其他区域无法收起的问题，后面查了下资料顺利解决，分享给大家！~~ <DatePicker format="yyyy/MM/dd" :capture="false" type="daterange" style="width: 258px" placeholder="请选择有效期" v-model="searchTime" @on-change="getTime"></DatePicker> 增加:capture="false
Vue elementUI-select多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应
zhuzicc的博客
08-26 5418
文章目录一、问题描述二、问题分析三、解决方法1.方法一 vm.$set2.方法二 $forceUpdate() 一、问题描述 项目上使用Vue+elementUI-select多选下拉框做数据编辑时，数据回显成功，但是无法对回显成功数据进行操作。 代码片段： <template> <el-form-item label="标签：" prop="values"> <el-select v-model="form.values"
bug修复：elementui el-select组件点击图标无法关闭下拉框
xxjiushini的博客
11-16 2990
bug修复：elementui el-select组件点击图标无法关闭下拉框 问题：el-select组件增加了filterable筛选后 点击图标无法关闭下拉选项框 解决方法：在main.js里的created生命周期里添加如下代码即可，全局修复bug，亲测有用 //修改ele 的select下拉组件增加filterable会出现点击收回图标下拉选项收不回的bug Object.getPrototypeOf(this.$options.components).ElSelect.optio
日期框、下拉框点击iframe区域无法关闭
qq_44130459的博客
09-30 481
vue 嵌套 jsp 的页面中，上面查询条件部分是element 表单，下面（内容）部分是iframe引入的jsp页面；问题：查询表单 日期框、下拉框，获取焦点（弹出内容）后，点击 iframe 嵌套的内容，不会失去焦点。给 iframe 区域 加遮罩层，用变量（mask）控制遮罩层的存在的时机。
Vue + ElementUI 开发项目，遇到下拉框option 失去焦点时 不关闭的问题
weixin_43968963的博客
04-27 3843
问题描述： 使用Vue + ElementUI 框架开发项目且用了下拉加载更多，遇到了下拉框（el-select）中的option（el-option）失去焦点后，下拉框不隐藏，并在控制台报错**Uncaught TypeError: Cannot read properties of null (reading ‘disabled’) **，截图如下： 控制台报错： 不关闭的下拉选择框： 百度参考了其他文章之后得到的结果是使用了 el-dropdown 下缺少 el-dropdown-menu 元素
vue 下拉框自定义 以及点击空白空白处关闭下拉框 vue的自定义事件directive
qq_45894929的博客
02-20 1109
<!-- 搜索 --> <div class="search-bar-package search_bar-package" v-close> <div class="div_form"> <div class="opt"> 专业 <img src="../assets/images/sanjiao.png" alt .
手动调用element DateTimePicker 日期时间选择器关闭事件
扬帆前行
08-04 4890
手动调用element DateTimePicker 日期时间选择器关闭事件 有时候手动调用控件的关闭隐藏控件事件官网api中没有此事件，查看源码发现有一个handleClose事件，亲测可用，在日期选择控件上设置ref，直接调用handleClose()可达到关闭日期控件的作用 ...
在vue中使用elementui组件
06-28
在Vue中使用ElementUI组件非常简单，只需要按照以下步骤即可： 1. 安装ElementUI：可以使用npm或yarn进行安装，命令如下： ``` npm install element-ui --save ``` 或者 ``` yarn add element-ui ``` 2. 在Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

King_960725

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

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

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

打赏作者

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

抵扣说明：

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

余额充值