使用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('这是消息内容');