?當項目比較大使用了非常多的 Modal 和 Drawer 要是有需求一次性全部調整就會比較麻煩,目前 Antd 的?ConfigProvider 暫不支持(也有可能我沒找到,待大佬指證)就比如由于默認?Modal Drawer 的遮罩層是可以點擊關閉的,但是業務需要,要求全部不可點擊,這時候一個一個去加就很麻煩,還容易遺漏。然后方案來了
React?
新建 patch 的文件夾(名字隨意)
為了方便擴展,結構根據自己需要調整
src/patch/Drawer/index.ts
import { Drawer } from 'antd';/*** 全局覆蓋Drawer組件默認屬性配置* 1. 強制禁用maskClosable防止誤觸關閉(原默認值true)* 2. 保留原有默認屬性配置,僅擴展新特性*/
(Drawer as React.ComponentType<any>).defaultProps = {...(Drawer as React.ComponentType<any>).defaultProps,maskClosable: false,
};
src/patch/index.ts
import * as Drawer from './Drawer';export { Drawer };
在 main.tsx 引入
import '@/patch';
就可以全局覆蓋