elementui message
Element UI Message 组件使用指南
Element UI 的 Message 组件用于展示全局提示信息，常用于操作反馈、通知提醒等场景。以下为详细使用方法及常见配置：
基础用法
通过 this.$message 调用，支持直接传入字符串或配置对象：
// 简单文本提示
this.$message('这是一条普通消息')
// 带类型提示
this.$message.success('成功消息')
this.$message.warning('警告消息')
this.$message.error('错误消息')
this.$message.info('信息消息')配置选项
支持通过对象形式配置更多参数：
this.$message({
message: '自定义内容',
type: 'success',
duration: 3000, // 显示时长(ms)，默认3000
showClose: true, // 是否显示关闭按钮
center: true, // 文字是否居中
offset: 20, // 距离顶部的偏移量
onClose: () => { // 关闭回调函数
console.log('Message closed')
}
})全局配置
可在 Vue 项目入口文件设置默认参数：
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI, {
size: 'small',
message: {
max: 3, // 同时显示的最大数量
duration: 5000
}
})手动关闭
通过返回的实例手动控制消息关闭：
const msgInstance = this.$message({
message: '这条消息需要手动关闭',
duration: 0
})
// 调用close方法关闭
setTimeout(() => {
msgInstance.close()
}, 2000)注意事项
- 当设置为
duration: 0时消息不会自动关闭 - 多个 Message 会默认堆叠显示，可通过
offset调整位置 - 在服务端渲染(SSR)场景需特殊处理，避免 document 未定义错误
- 组件内部使用 Promise 确保顺序执行，避免消息重叠
样式定制
可通过覆盖 CSS 变量实现主题定制：
.el-message {
--el-message-min-width: 400px;
--el-message-bg-color: #f0f9eb;
}
.el-message--success {
--el-message-text-color: #67c23a;
}以上方法覆盖了 Element UI Message 组件的绝大多数使用场景，可根据实际需求选择合适的方式。
