vue3中Element-plus全局配置Dialog遮罩层点击不关闭

已于 2023-09-21 17:13:26 修改
阅读量1.4k 收藏 2
点赞数 2
文章标签： vue.js 前端
于 2023-04-25 20:42:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50478033/article/details/130373654
版权

在main.js文件中进行如下配置：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App'

const app = createApp(App)
app.use(ElementPlus, {})
app._context.components.ElDialog.props.closeOnClickModal.default = false

七的不是海
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-plus 图片预览，遮罩层显示问题
qq_53172341的博客
02-20 473
Element-plus 图片预览，遮罩层显示问题。
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮
06-04
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮。 需要显示详情，但是不想从新写一个页面。所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能...
【vue 】element配置全局或单个Dialog点击遮罩不关闭
向着光芒的女孩
02-10 4354
在很多编辑信息弹框，尤其后台管理系统，如果一点击遮罩关闭弹窗，再次点开弹窗又做了重置表单的操作会导致用户操作数据丢失，可以设置点击遮罩不关闭弹窗。
vue3封装ElementUI plus Dialog弹窗
最新发布
阿狸演绎的博客
05-20 765
因为ElementuiPlus的dialog弹框的初始样式不太好看,而公司要求又要好看,本来是已经实现了,但是后来想想了发现封装完dialog的其他功能也要,所以特此记录一下。思路:封装一个组件,组件内部嵌套el-dialog,然后定义好公共样式,定义好方法,直接使用。思路:封装一个组件,将所有新增的参数引入el-dialog 参数中,实现参数共用。缺陷:因为很多属性定义好了,导致如果超出既定样式的方案就得重新调整代码。新建一个组件,将官网暴露的属性全部引用了。
el-dialog点击遮罩层不关闭弹窗
lighting0_0的博客
11-22 3565
原文链接： https://blog.csdn.net/qq_44711316/article/details/120968545?ops_request_misc=&request_id=&biz_id=102&utm_term=element%20dialog%E7%82%B9%E5%87%BB%E9%81%AE%E7%BD%A9%E5%B1%82%E4%B8%8D%E5%85%B3%E9%97%AD%E5%BC%B9%E7%AA%97%20%E5%B1%80%E9%83%A8%
element-plus设置全局遮罩层
周金鱼啊
06-16 1859
新建loading.ts文件 import { ElLoading } from 'element-plus'; let loadingCount = 0; let loading; const startLoading = () => { loading = ElLoading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.6)' });
Element-UI中el-dialog打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
2301_76707317的博客
09-27 257
根据官网文档可知，在弹框中添加如下代码即可解决。
vue 子组件 el-dialog弹框点击旁边的遮罩层无法关闭
weixin_45060105的博客
10-09 771
问题：点击el-dialog弹框旁边的遮罩层无法关闭弹框的 原因：style里的样式影响 解决方案：去掉样式
毕业设计-校园二手物品交易平台前端,主要使用Vue，Element-Plus。.zip
10-20
5. **Element-Plus组件应用**：在页面设计中，广泛使用Element-Plus的组件，如使用`el-table`展示物品列表，`el-form`处理表单数据，`el-dialog`弹出对话框进行确认操作等，使页面具有良好的交互性和视觉效果。...
vue+element加入签名效果（移动端可用）
10-16
3. **自定义样式**：为了让弹出框适应签名功能，需要在全局CSS中对`el-dialog`、`.el-dialog__header`和`.el-dialog__body`进行定制，调整它们的高度和宽度，以适应签名组件的展示。 ```css .el-dialog { .el-...
vite-vue-elementplus-admin.rar
09-18
ElementPlus是Element UI的升级版，为Vue3提供了丰富的组件库，设计简洁且功能强大。 【标签】"vue3"：Vue3是Vue.js的最新版本，引入了Composition API，提高了代码组织的灵活性，同时增强了性能和减少了体积。 ...
基于 Vue + Element UI 开发，参考小米商城，实现的电商项目-vue-xiaomi.zip
11-04
【标题】中的“基于 Vue + Element UI 开发，参考小米商城，实现的电商项目”揭示了这个项目的核心技术栈和设计灵感。Vue.js 是一款轻量级、高性能的前端JavaScript框架，它允许开发者构建可复用组件，实现数据驱动...
el-dialog 点击遮罩层就不关闭
2201_75410538的博客
03-06 377
【代码】el-dialog 点击遮罩层就不关闭。
修改 el-dialog 默认点击遮照为不关闭
qq_43193513的博客
10-23 226
【代码】修改 el-dialog 默认点击遮照为不关闭。
elementUI全局设置弹框默认点击遮罩层不关闭
wgb0409的博客
01-14 2508
在main.js中设置 import ElementUI from "element-ui"; ElementUI.Dialog.props.closeOnClickModal.default = false;
ElmentUI全局禁止点击遮罩层关闭el-dialog弹窗
m0_49494051的博客
09-23 317
在mian.js里面： import ElementUI from 'element-ui'; // 修改 el-dialog 默认点击遮照为不关闭 ElementUI.Dialog.props.closeOnClickModal.default = false;
ElmentUI禁止点击遮罩层关闭el-dialog弹窗、对话框滑动不消失功能
Lydia
08-05 2021
ElmentUI全局禁止点击遮罩层关闭el-dialog弹窗、对话框不消失功能、显示弹框时，设置页面滚动条仍然可以滚动。
element Drawer 抽屉点击空白全局不允许关闭修改 el-dialog 默认点击遮照为不关闭\全局设置点击遮罩层不关闭 Dialog
看到我在玩请叫我去敲代码的博客
03-21 1763
element Drawer 抽屉点击空白全局不允许关闭修改 el-dialog 默认点击遮照为不关闭\全局设置点击遮罩层不关闭 Dialog
vue3使用element-plus配置
08-19
Vue3使用Element Plus的配置方法如下： 第一步是安装Element Plus，其中element-plus是专为Vue3设计的，而element-ui是用于Vue2的。 第二步是通过浏览器的HTML标签导入Element Plus的样式和组件库。可以通过以下代码在<head>标签中导入样式和组件库： ```html <head> <!-- 导入样式 --> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> <!-- 导入 Vue 3 --> <script src="//unpkg.com/vue@3"></script> <!-- 导入组件库 --> <script src="//unpkg.com/element-plus"></script> </head> ``` 第三步是导入和使用Element Plus组件。可以通过以下代码导入全部组件并注册所有的图标： ```javascript // 导入 element-plus import ElementPlus from "element-plus"; // 导入 element-plus 样式 import "element-plus/dist/index.css"; // 导入 element-plus 图标 import * as ElementPlusIconsVue from "@element-plus/icons-vue"; // 注册所有图标 for (const [key, component of Object.entries(ElementPlusIconsVue)) { app.component(key, component); } ``` 第四步是声明使用ElementPlus的全局变量，包括在Vue的实例中使用和挂载路由、状态管理等插件。可以通过以下代码实现： ```javascript // 使用router、vuex、element-plus并挂载 app.use(ElementPlus).use(router).use(store).mount("#app"); ``` 以上是Vue3使用Element Plus的配置方法。通过安装、导入和使用组件，以及声明使用ElementPlus的全局变量，就可以在Vue3中配置和使用Element Plus了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue3使用element-plus](https://blog.csdn.net/m0_66492535/article/details/128048780)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值