使用Vue和Bootstrap 4创建漂亮的Toasts消息 -vue-bootstrap-toasts

使用Vue和Bootstrap 4创建漂亮的Toasts消息 -vue-bootstrap-toasts
插件名称 vue-bootstrap-toasts
发布时间 2020年4月29日
插件作者 rakk7

一个Vue.js组件,它使用Bootstrap 4 Toasts组件在应用程序上创建漂亮的,可配置的Toast样式通知弹出窗口。

安装和下载:

# NPM
$ npm install vue-bootstrap-toasts --save

更多功能:

  • RTL支持。
  • 进度条显示剩余时间。
  • 自定义超时。
  • 可以
  • 4种通知类型:成功,信息,警告,错误。

如何使用它:

导入和注册组件。

import VueBootstrapToasts from "vue-bootstrap-toasts";
Vue.use(VueBootstrapToasts);

在应用程序中创建Toast组件。

<Toasts> </ Toasts>

使用以下props配置组件。

<Toasts
  :show-progress="true"
  :rtl="false"
  :max-messages="5"
  :time-out="3000"
  :closeable="true"
></Toasts>

显示Toast消息。

this.$toast.success('这是消息内容');
this.$toast.error('这是消息内容');
this.$toast.warning('这是消息内容');
this.$toast.info('这是消息内容');