在
Vue 3 中，我们可以通过创建
一个全局提示组件（`Message`）和
通知提醒框组件（`
Notification`），实现类似 Element Plus 或 Ant Design 的全局提示功能。
下面将
使用 **
Vue 3 Composition API + Teleport** 实现这两个组件。我们将从零开始构建，确保它们可以在任意页面中调用而无需引入第三方库。
---
## ✅ 效果预览
- `Message.success('操作成功')`：
显示一个短暂的全局提示
- `
Notification.open({ title: '
提醒', message: '你有一条新消息' })`：弹出右下角
通知提醒框
---
## 🧩 实现步骤概览
1. 创建 `Message.
vue` 组件
2. 创建 `
Notification.
vue` 组件
3. 创建 `message.js` 和 `
notification.js` 工具函数用于全局调用
4. 在 `main.js` 中注册为原型方法或提供插件机制
5.
使用方式：`this.$message.success('xxx')` 或 `app.config.globalProperties.$message.success('xxx')`
---
## 📄 1. `Message.
vue` - 全局提示组件
```
vue
<template>
<transition name="fade">
<div v-if="visible" class="message-box" :class="type">
{{ message }}
</div>
</transition>
</template>
<script setup>
import { ref, onMounted } from '
vue';
const props = defineProps({
message: String,
type: String,
duration: Number
});
const visible = ref(true);
onMounted(() => {
setTimeout(() => {
visible.value = false;
}, props.duration);
});
</script>
<style scoped>
.message-box {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
border-radius: 4px;
color: white;
z-index: 9999;
min-width: 150px;
text-align: center;
}
.message-box.success {
background-color: #67c23a;
}
.message-box.error {
background-color: #f56c6c;
}
.message-box.warning {
background-color: #e6a23c;
}
.message-box.info {
background-color: #409eff;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
```
---
## 📄 2. `
Notification.
vue` -
通知提醒框组件
```
vue
<template>
<transition name="slide">
<div v-if="visible" class="
notification" :class="type">
<h4>{{ title }}</h4>
<p>{{ message }}</p>
</div>
</transition>
</template>
<script setup>
import { ref, onMounted } from '
vue';
const props = defineProps({
title: String,
message: String,
type: String,
duration: Number
});
const visible = ref(true);
onMounted(() => {
setTimeout(() => {
visible.value = false;
}, props.duration);
});
</script>
<style scoped>
.
notification {
position: fixed;
right: 20px;
bottom: 20px;
width: 300px;
padding: 15px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
background-color: white;
z-index: 9999;
animation: slideIn 0.3s ease forwards;
}
.
notification h4 {
margin: 0 0 5px;
}
.
notification p {
margin: 0;
font-size: 14px;
color: #666;
}
.
notification.success {
border-left: 4px solid #67c23a;
}
.
notification.error {
border-left: 4px solid #f56c6c;
}
.
notification.warning {
border-left: 4px solid #e6a23c;
}
.
notification.info {
border-left: 4px solid #409eff;
}
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s;
}
.slide-enter-from {
transform: translateY(30px);
opacity: 0;
}
.slide-leave-to {
transform: translateY(-30px);
opacity: 0;
}
</style>
```
---
## 🛠️ 3. `message.js` 工具类
```js
import { createApp, h } from '
vue';
import MessageComponent from './Message.
vue';
export default {
success(message) {
this.show(message, 'success');
},
error(message) {
this.show(message, 'error');
},
warning(message) {
this.show(message, 'warning');
},
info(message) {
this.show(message, 'info');
},
show(message, type) {
const container = document.createElement('div');
document.body.appendChild(container);
const app = createApp({
render() {
return h(MessageComponent, {
message,
type,
duration: 2000
});
}
});
app.mount(container);
setTimeout(() => {
app.unmount();
document.body.removeChild(container);
}, 2000);
}
};
```
---
## 🛠️ 4. `
notification.js` 工具类
```js
import { createApp, h } from '
vue';
import
NotificationComponent from './
Notification.
vue';
export default {
open({ title = '', message = '', type = 'info', duration = 3000 }) {
const container = document.createElement('div');
document.body.appendChild(container);
const app = createApp({
render() {
return h(
NotificationComponent, {
title,
message,
type,
duration
});
}
});
app.mount(container);
setTimeout(() => {
app.unmount();
document.body.removeChild(container);
}, duration);
}
};
```
---
## 📦 5. 注册为全局方法（`main.js`）
```js
import { createApp } from '
vue';
import App from './App.
vue';
import message from './components/message';
import
notification from './components/
notification';
const app = createApp(App);
// 挂载全局方法
app.config.globalProperties.$message = message;
app.config.globalProperties.$notify =
notification;
app.mount('#app');
```
---
## 🧪 6.
使用方式（任意组件内）
```js
this.$message.success('这是一条成功提示');
this.$message.error('这是
一个错误提示');
this.$notify.open({
title: '系统
提醒',
message: '您有新的消息，请查收。',
type: 'success'
});
```
---
### ❗常见问题排查建议：
1. **提示不
显示**
- 确保 DOM 正确插入到 `body`
- 检查样式是否被覆盖或未加载
2. **动画无效**
- 确保 `<transition>` 包裹正确，且 CSS 动画定义完整
3. **重复挂载导致内存泄漏**
-
使用后务必 `unmount()` 并移除 DOM 节点
4. **多个提示重叠**
- 可以加入队列逻辑控制只
显示一个
---
本文介绍了一种使用notification组件显示升级提示的方法。通过设置key和duration属性，可以控制提示的唯一性和显示时长。同时，利用description属性自定义了包含升级链接的提示内容。
扫一扫
1616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
