Vue Toast组件可按顺序显示可自定义的Toast消息。这意味着新消息将排队，直到隐藏之前的消息为止。

安装和下载：

# Yarn
$ yarn add vue-toast-notification

# NPM
$ npm install vue-toast-notification --save

使用：

1.安装并导入vue-toast-notification。

import Vue from 'vue';
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/index.css';

2.注册组件。

Vue.use(VueToast);

3.在屏幕上显示基本的Toast消息。

Vue.$toast.open('简单的Toast消息');

4.更改通知类型。所有可能的类型：

• （success）成功
• （info）信息
• （warning）警告
• （error）错误
• （default）默认

Vue.$toast.open({
  message: '错误消息',
  type: 'error'
});

// 或
Vue.$toast.success(message,?options)
Vue.$toast.error(message,?options)
Vue.$toast.warning(message,?options)
Vue.$toast.info(message,?options)
Vue.$toast.default(message,?options)

5.更改Toast的位置。

• （top）顶部
• （bottom）底部
• （top-right）右上角（默认）
• （bottom-right）右下
• （top-left）左上方
• （bottom-left）左下方

Vue.$toast.open({
  message: '错误消息',
  position: 'top-right'
});

6.设置自动消除Toast消息之前要等待的时间。默认值：3秒。

Vue.$toast.open({
  message: '错误消息',
  duration: '3000'
});

7.确定Toast消息是否可关闭。默认值：true。

Vue.$toast.open({
  message: '错误消息',
  dismissible: false
});

8.确定是否应将Toast消息排队。默认值：false。

Vue.$toast.open({
  message: '错误消息',
  queue: true
});

9.单击/点击Toast消息时执行功能。

Vue.$toast.open({
  message: '错误消息',
  onClose: FUNCTION
});

变更日志：

v0.6.2 (05/30/2021)

• 修复：SSR问题

v0.6.1 (02/15/2021)

• 添加保持吐司打开的能力

v0.6.0（09/21/2020）

• 将close（）方法重命名为dismiss（）
• 将onClose道具重命名为onDismiss
• 在CSS类中使用BEM命名约定

v0.5.4（09/21/2020）

• 错误修正

v0.5.3（09/20/2020）

• 错误修正

v0.5.0（08/08/2020）

• 错误修正
• CSS类以v-为前缀，如果您要覆盖任何CSS类，请重新访问代码

v0.4.1（06/25/2020）

• 错误修正

---

官网：https://github.com/ankurk91/vue-toast-notification

演示：https://www.vue365.cn/code_demo.php?id=258

GitHub下载：https://github.com/ankurk91/vue-toast-notification/archive/master.zip