element-plus更改组件的默认属性

https://blog.csdn.net/renovateF5/article/details/143675396

 

举例说明：更改el-dialog的close-on-click-modal属性，原版属性是true，即点击遮罩层可关闭弹窗，需求是给所有的el-dialog的close-on-click-modal属性给false，不让通过点击遮罩层关闭弹窗。

按需导入版本
按需导入版本直接在main.ts/main.js中写入下面代码即可

import { ElDialog } from 'element-plus'
ElDialog.props.closeOnClickModal.default = false
全局引入版本
同样修改main文件

方法一：

全局引入的版本会用到下面的代码

import ElementPlus from "element-plus";
const vueApp = Vue.createApp(App);
vueApp.use(ElementPlus);
这里引入element-plus的时候多引入一个，然后修改掉属性

import ElementPlus, { ElDialog } from "element-plus";
ElDialog.props.closeOnClickModal.default = false;
const vueApp = Vue.createApp(App);
vueApp.use(ElementPlus);
对ElDialog无需再做其他处理

方法二：
直接修改vueapp示例上的属性，由于是全局引入，可以在_context上的components拿到el-dialog的内容和属性直接修改即可，但是如果使用了ts的话，这里会报any类型警告

import ElementPlus from "element-plus";
const vueApp = Vue.createApp(App);
vueApp.use(ElementPlus);
vueApp._context.components.ElDialog["props"].closeOnClickModal.default = false;
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/renovateF5/article/details/143675396