按顺序显示Toast消息– vue-toast-notification

按顺序显示Toast消息– vue-toast-notification
插件名称 vue-toast-notification
发布时间 2020年4月18日
插件作者 ankurk91

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

变更日志:

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)

  • 错误修正

安装和下载:

# 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
});