vue toast

// Vue Toast 示例代码

// 1. 安装 vue-toast-notification 插件
// npm install vue-toast-notification

// 2. 在 main.js 中引入并注册插件
import { createApp } from 'vue';
import App from './App.vue';
import Toast from "vue-toast-notification";
import "vue-toast-notification/dist/theme-sugar.css"; // 引入样式

const app = createApp(App);
app.use(Toast); // 注册插件
app.mount('#app');

// 3. 在组件中使用 toast
<template>
  <div>
    <button @click="showToast">显示 Toast</button>
  </div>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$toast.open({
        message: "这是一条 Toast 消息",
        type: "success", // success, info, warning, error
        duration: 3000, // 显示时长，单位为毫秒
        position: "top-right" // top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
      });
    }
  }
};
</script>

<!-- 解释说明：
- 通过 `vue-toast-notification` 插件可以很方便地在 Vue 项目中实现 Toast 提示功能。
- 在 main.js 中引入并注册插件后，可以在任何组件中使用 `this.$toast.open()` 方法来显示 Toast。
- `message` 是要显示的消息内容，`type` 是消息类型（成功、信息、警告、错误），`duration` 是显示时长，`position` 是消息的位置。
-->