javascript - vue3+vite+typeScript开发的项目，element plus 使用自动导入，在使用ElMessage组件时，想设置offset属性居中，请问全局该在哪配置生效呢？

Question

vue3+vite+typeScript开发的项目，element plus 使用自动导入，在使用ElMessage组件时，想设置offset属性居中，请问全局该在哪配置生效呢？
代码如下
vite.config.js

main.ts

ElMessage组件使用如下：

自定义配置，offset: window.screen.height / 3，
现在多处地方使用了ElMessage组件，能否在哪全局配置下，不用每个都加一遍呢？

Answer 1

可以在src\plugins\elementPlus\index.ts下
import {messageDefaults} from 'element-plus'
// @ts-ignore
messageDefaults.offset = 200

Answer 2

改默认值就好

import * as el from "element-plus";el.messageDefaults.offset = 200;el.ElMessage("this is a message.");

Answer 3

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.tsexport declare const messageDefaults: Mutable<{  // ...  readonly offset: 16;  // ...}>;