0.1.1 • Published 6 years ago
v-mobile-toast v0.1.1
v-mobile-toast
介绍
实现了一个简单的toast插件,调用方法
全局
import Vue from 'vue'
import Toast from 'v-mobile-toast'
Vue.use(Toast)OR
import Vue from 'vue'
import { ToastPlugin } from 'v-mobile-toast'
Vue.use(ToastPlugin)以插件形式注册时,使用方式为:
this.$toast.show({})
this.$toast.hide()组件
import Toast from 'v-mobile-toast'
export default {
components: {
Toast
}
}API
属性(以组件形式使用)
| 参数 | 取值 | 必选 | 说明 |
|---|---|---|---|
| value | true/false(默认) | 必选 | 控制显示隐藏 v-model |
| text | string | 必选 | toast提示内容 |
| time | number | 非必选 | toast显示的时长 |
| type | string: success/warn/info | 非必选 | toast类型 |
| width | string: 7.6em(默认) | 非必选 | toast宽度 |
| is-show-mask | boolean: false(默认)/true | 非必选 | 是否显示蒙层 |
事件
| 事件 | 说明 |
|---|---|
| on-show | 显示组件时触发 |
| on-hide | 隐藏组件时触发 |
以插件形式调用时
this.$toast.show({
text: '', // 必填
// 除上面value之外的属性,
// 事件,如果需要
onShow: f, // 对应on-show
onHide: f // 对应on-hide
})
this.$toast.hide()