vue3+vite+typeScript开发的项目,element plus 使用自动导入,在使用ElMessage组件时,想设置offset属性居中,请问全局该在哪配置生效呢?
vue3+vite+typeScript开发的项目,element plus 使用自动导入,在使用ElMessage组件时,想设置offset属性居中,请问全局该在哪配置生效呢?代码如下vite.config.jsmain.ts
ElMessage组件使用如下:自定义配置,offset: window.screen.height / 3,现在多处地方使用了ElMessage组件,能否在哪全局配置下,不用每个都加一遍呢?
回复
1个回答
test
2024-06-25
ElMessage
本身没有提供修改 offset
默认值的方法,如果需要修改默认值可以自行包装一个message方法或者修改源码实现。
- 包装方法示例如下:
export function message(options) {
return ElMessage(Object.assign({offset: window.screen.height / 3}, options));
}
- 或者修改源码
node_modules/element-plus/lib/components/message/src/message.js
(也可以clone项目element-plus然后修改/packages/components/message/src/message.ts
中对应代码后自行打包使用)
const messageDefaults = typescript.mutable({
customClass: "",
center: false,
dangerouslyUseHTMLString: false,
duration: 3e3,
icon: void 0,
id: "",
message: "",
onClose: void 0,
showClose: false,
type: "info",
// 将此处的默认值修改为 `window.screen.height / 3` 即可
offset: 16,
zIndex: 0,
grouping: false,
repeatNum: 1,
appendTo: core.isClient ? document.body : void 0
});
以及 message.d.ts
// /node_modules/element-plus/es/components/message/src/message.d.ts
export declare const messageDefaults: Mutable<{
// ...
readonly offset: 16;
// ...
}>;
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容