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

作者站长头像
站长
· 阅读数 8

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

ElMessage组件使用如下:vue3+vite+typeScript开发的项目,element plus 使用自动导入,在使用ElMessage组件时,想设置offset属性居中,请问全局该在哪配置生效呢?自定义配置,offset: window.screen.height / 3,现在多处地方使用了ElMessage组件,能否在哪全局配置下,不用每个都加一遍呢?

回复
1个回答
avatar
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;
  // ...
}>;
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容