Toast
简短的消息提示框,demo
用法
<toast v-for="toast in toasts" :text="toast.text" :loading="toast.loading" :icon="toast.icon" :center="toast.center"></toast>
{
data () {
return {
toasts: []
}
},
methods: {
show (type) {
switch (type) {
case 'center':
this.toasts.push({
text: '在中间',
center: true
})
break
case 'ok':
this.toasts.push({
text: '操作成功',
icon: 'check',
center: true
})
break
default:
this.toasts.push({
text: '默认toast'
})
break
}
setTimeout(() => this.toasts.splice(0, 1), 2000)
}
}
}
API
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
center | toast是否在中间 | Boolean | true / false | false |
text | 提示文字 | String | ||
icon | 图标 | String | material icons |