插件名称 | vuetify-toast-snackbar |
---|---|
发布时间 | 2020年5月25日 |
插件作者 | eolant |
使用Vuetify Snackbar组件的真正基础的Vue toast服务。
2020/06/18
# NPM
$ npm install vuetify-toast-snackbar --save
捆绑器(Webpack,汇总)
import VuetifyToast from 'vuetify-toast-snackbar'
Vue.use(VuetifyToast, {
x: 'right', // 默认
y: 'bottom', // 默认
color: 'info', // 默认
icon: 'info',
iconColor: '', // 默认
classes: [
'body-2'
],
timeout: 3000, // 默认
dismissable: true, // 默认
multiLine: false, // 默认
vertical: false, // 默认
queueable: false, // 默认
showClose: false, // 默认
closeText: '', // 默认
closeIcon: 'close', // 默认
closeColor: '', // 默认
slot: [], //默认
shorts: {
custom: {
color: 'purple'
}
},
property: '$toast' // 默认
})
Vue加载程序(例如Nuxt.js)
更新资料 plugins/vuetify.js
import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'
Vue.use(Vuetify, {
components: {
VSnackbar,
VBtn,
VIcon
}
})
Vue.use(VuetifyToast)
回调
this.$toast('Default toast')
this.$toast.info('Info toast')
this.$toast('Custom options', {
color: 'green',
dismissable: true,
queueable: true
})
this.$toast.custom('Custom short')
this.$toast(null, {
slot: [this.$createElement('button', ['Click here'])]
})
获取当前显示的Toast组件
let cmp = this.$toast.getCmp()
cmp.message = 'Dynamic properties'
cmp.close()
清除Toast队列
let queue = this.$toast.clearQueue()