天猫精灵IoT开放平台
Toast 面包块提示
更新时间：2019/03/05
访问次数：1298
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | 内容文字 | stirng | —— | —— |
| type | 类型 | stirng | success & error & loading | —— |
| duration | 时长 | number | —— | 2500 |
使用示例
<template>
<div>
<button @click="showToast">点击显示 Toast</button> <br/>
<button @click="showToast2">点击显示 Loading Toast</button> <br/>
<button @click="showToast3">点击显示 success Toast</button> <br/>
<button @click="showToast4">点击显示 error Toast</button>
</div>
</template>
<script>
import Vue from 'vue'
import { Toast } from 'genie-ui'
Vue.use(Toast)
export default{
methods: {
showToast(v) {
this.$toast({
text: '这是一个简单的小情歌',
duration: 2500
})
},
showToast2(v) {
this.$toast({
type: 'loading',
text: '正在修改中...',
duration: 2500
})
},
showToast3(v) {
this.$toast({
type: 'success',
text: '修改成功',
duration: 2500
})
},
showToast4(v) {
this.$toast({
type: 'error',
text: '定时修改失败<br/>请检查设备是否在线',
duration: 2500
})
}
}
}
</script>
