vue 弹出顶部提示框

### Vue 中实现顶部提示框

在 Vue 应用程序中实现固定于顶部的消息提示框可以通过多种方式进行。一种推荐的方法是利用现有的库，如 `Vue Toast Notification`，这是一款基于 Vue.js 的轻量级提示框组件[^2]。

#### 使用现有库：Vue Toast Notification

为了简化开发过程并提高效率，可以采用已经成熟的第三方插件——`Vue Toast Notification` 来创建顶部的通知栏。此插件不仅支持基本的成功、失败以及警告类型的提醒，还提供了丰富的配置选项以便自定义样式和行为。

安装该插件：

npm install vue-toast-notification --save

引入并注册全局组件：

import { createApp } from 'vue';
import App from './App.vue';
import Toast, { POSITION } from "vue-toast-notification";
import "vue-toast-notification/dist/theme-sugar.css";

const app = createApp(App);
app.use(Toast, {
    position: POSITION.TOP_RIGHT,
});
app.mount('#app');

调用 toast 方法展示不同种类的信息：

this.$toast.success('操作成功！');
this.$toast.error('发生了一个错误...');
this.$toast.warning('请注意这个警告信息.');

以上代码片段展示了如何通过简单的 API 调用来触发不同类型的通知消息，并将其定位到页面的右上方位置显示出来。

#### 自定义实现方案

如果希望更深入控制或学习底层原理，则可以根据具体需求自行编写一个简易版的消息提示组件。这里提供了一种基础的设计思路，其中涉及到动画效果处理等内容。

创建一个新的 Vue 单文件组件 (`Message.vue`)：

<template>
  <transition name="slide-fade">
    <div v-if="visible" class="message-box">{{ message }}</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: ''
    };
  },
  methods: {
    show(msg) {
      this.message = msg;
      this.visible = true;

      setTimeout(() => {
        this.close();
      }, 3000); // 设置自动关闭时间
    },
    close() {
      this.visible = false;
    }
  }
};
</script>

<style scoped>
/* 添加一些 CSS 动画 */
.slide-fade-enter-active {
  transition: all .3s ease-out;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

.message-box {
  padding: 1rem;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  top: 20px; /* 可调整距离顶部的距离 */
  z-index: 9999;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}
</style>

然后可以在其他地方导入并使用这个组件实例化对象来进行消息推送：

// 假设 Message 已经被正确加载进来
let messageInstance = new (Vue.extend(Message))().$mount();

document.body.appendChild(messageInstance.$el);

function showMessage(text){
  messageInstance.show(text);
}
showMessage("这是一个测试消息");

这种方法允许完全掌控组件的行为逻辑及其外观设计，适用于那些想要深入了解 Vue 组件机制的学习者或是对于特定业务场景下需要高度定制化的项目。