当前位置:首页 > 技术分析 > 正文内容

Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框

ruisui882个月前 (02-27)技术分析19

Element Plus 的 Dialog 组件默认情况下,点击遮罩层(即背景蒙版)会关闭对话框。然而,你可以通过修改组件的 close-on-click-modal 属性来改变这个行为。

如果你想要实现点击遮罩层不关闭 Dialog,你需要将 close-on-click-modal 属性设置为 false。这可以在组件的局部设置中进行,也可以全局配置。

局部设置

在 Dialog 组件的模板中,直接添加 :close-on-click-modal="false":

  
    

全局配置

如果你希望所有 Dialog 组件都默认拥有这个行为,你可以通过全局配置来实现。在 Vue 应用的入口文件(通常是 main.js 或 main.ts)中,配置 Element Plus 并修改 ElDialog 组件的默认属性:

import { createApp } from 'vue';  
import ElementPlus from 'element-plus';  
import 'element-plus/lib/theme-chalk/index.css';  
import App from './App.vue';  
  
const app = createApp(App);  
  
app.use(ElementPlus);  
  
// 全局配置 Dialog 组件,使得点击遮罩层不关闭弹窗  
app.config.globalProperties.$ELEMENT = {  
  size: 'small', // 其他全局配置...  
  zIndex: 3000 // 其他全局配置...  
};  
  
// 修改 ElDialog 组件的 closeOnClickModal 属性的默认值  
app._context.components.ElDialog.props.closeOnClickModal.default = false;  
  
app.mount('#app');

请注意,直接修改
app._context.components.ElDialog.props.closeOnClickModal.default
并不是官方推荐的做法,因为这涉及到对 Vue 内部状态的直接操作,未来 Vue 或 Element Plus 的更新可能会导致此方法失效。不过,在 Element Plus 的当前版本中,这是一个可行的方法。

更好的方式是使用 Element Plus 的自定义主题功能或者等待 Element Plus 官方提供更为正式的全局配置 API。同时,也要关注 Element Plus 的更新日志,以便及时调整你的代码。

如果你发现你的 Dialog 组件在设置了 close-on-click-modal="false" 后仍然会在点击遮罩层时关闭,可能是因为你的项目中存在其他代码或插件影响了这个行为。这时,你需要检查你的项目代码,确保没有其他地方在修改这个属性,或者查看是否有其他事件监听器在监听遮罩层的点击事件并触发了关闭操作。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2323.html

标签: vue弹窗组件
分享给朋友:

“Element Plus 的 Dialog 组件实现点击遮罩层不关闭对话框” 的相关文章

Vue.js 组件通信的 3 大妙招

在 Vue.js 中,组件化是其核心概念之一,允许你将复杂的界面拆分成多个独立的、可复用的组件。在构建大型应用时,如何高效地在组件之间传递数据和触发事件是非常重要的。Vue.js 提供了多种方式来处理组件间的通信,下面是最常用的 3 种方式:1.父子组件通信:通过 Props 和 Events在 V...

gitlab简单搭建与应用

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab能够浏览源代码,管理缺陷和注释。可以管理团队对仓库的访问,它非常易于浏览提交过的版本并提供一个文件历...

理解virt、res、shr之间的关系(linux系统篇)

前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历,或者被问到这样的问题——你的程序在运行时占用了多少内存(物理内存)?通常我们可以通过top命令查看进程占用了多少内存。这里我们可以看到VIRT、RES和SHR三个重要的指标,他们分别代表什么意思呢?这是本文需要跟大家一起探讨的问题。...

Vue页面传参详解

一、两种方式方法1:name跳转页面this.$router.push({name:'anotherPage',params:{id:1}})另一页面接收参数方式:this.$route.params.id示例:控制台展示:方法2:path跳转页面this.$router.push(...

vue 开发规范

项目运行指南(#项目运行指南)开发本地环境(#开发本地环境)开发相关插件/工具(#开发相关插件工具)开发规范(#开发规范)vue(#vue)【数据流向】(#数据流向)【慎用全局注册】(#慎用全局注册)【组件名称】(#组件名称)【组件中的 CSS】(#组件中的-css)【统一标签顺序】(#统一标签顺序...

慕课 SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序

本课程以业务驱动技术栈,打造业务相对完整的掌上医疗小程序,解决大家没有好的毕设项目或者求职项目的困境。本课程案例采用前后端分离架构,业务功能完善(既有WEB管理端,也有移动用户端),界面美观,无需艰涩的技术也能做出亮眼的作品。SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序 |...