app.config.globalProperties将element plus ElMessage全局化
时间: 2024-10-15 16:22:09 浏览: 30
`app.config.globalProperties` 是Element Plus库中的一种配置机制,用于将 `ElMessage` 全局化或者说是将 `ElMessage` 组件设置为应用程序的全局通知中心。在Vue.js应用中,当你想在整个应用范围内共享某些状态或行为,比如显示错误消息或成功提示,你可以通过这个属性来统一管理。
在 `main.js` 或其他适当的入口文件中,你可以这样做:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import { ElMessage } from 'element-plus';
const app = createApp(App);
app.config.globalProperties.$message = ElMessage; // 将ElMessage绑定到全局
// 如果你想对全局消息有一些定制,可以在这里添加配置
app.config.globalProperties.$message({
top: true, // 消息框是否浮于页面顶部
duration: 3000, // 消息显示的时间(毫秒)
});
app.mount('#app');
```
现在在你的组件中,只需要注入 `$message` 对象就可以使用 `ElMessage` 功能了:
```html
<template>
<button @click="showSuccess">显示成功消息</button>
</template>
<script>
export default {
methods: {
showSuccess() {
this.$message.success('操作成功!');
}
}
};
</script>
```
阅读全文