1.0.0 • Published 3 years ago
vue-toast-plu v1.0.0
vue-toast-plu
基于 vue2 的移动端 tip-loading-toast 插件 (移动端使用 tip or loading)
1、安装:
npm install vue-toast-plu -S
2、引入:
import Toast from 'vue-toast-plu'
Vue.use(Toast)
// 初始化配置
Vue.use(Toast, options)
options:
options = {
toastOptions: {
// ... toast全局配置
},
tipOptions: {
// ... tip全局配置
},
loadingOptions: {
// ... loading全局配置
}
}
toastOptions:
key | 类型 | 默认值 | 解释 | 可选值 |
---|---|---|---|---|
position | String | 'topCenter' | 显示位置 | 'topCenter', 'topLeft', 'topRight', 'bottomCenter', 'bottomLeft', 'bottomRight' |
type | String | 'info' | toasst 类型 | 'info', 'error', 'success', 'warning' |
aotoClose | Boolean | true | 自动消失 | |
closeTime | Number | 3000 | 定时器时间 | |
width | Number | 300 | 宽 | |
height | Number | 80 | 高 | |
callback | Function|Null | null | toast关闭后回调 | |
title | String | '提示' | 标题 | 'info' => ‘提示’, 'error' => '错误', 'success' => '成功', 'warning' => '警告'也可自定义任何字符串,将覆盖默认值 |
tipOptions
key | 类型 | 默认值 | 解释 | 可选值 |
---|---|---|---|---|
position | String | 'bottom' | 显示位置 | 'bottom', 'top', 'center' |
width | Number|String | 'auto' | 宽 | |
wrap | Boolean | false | 自动换行 | |
closeTime | Number | 3000 | 定时器时间 |
loadingOptions
key | 类型 | 默认值 | 解释 |
---|---|---|---|
msg | String | 'loading...' | loading文本 |
showMsg | Boolean | true | 是否显示文本 |
3、组件中使用
// toast 使用
vm = this.$toast('文本')
// 可自定义toastOptions覆盖全局配置或默认配置
this.$toast('文本', toastOptions)
// 快捷方法 注意: 快捷方法指定的位置或type优先级 > toastOptions
this.$toast.topCenter('文本')
this.$toast.success('文本', toastOptions)
// 关闭toast
vm.closeToast()
// tip 使用
this.$tip('文本')
// 可自定义tipOptions覆盖全局配置或默认配置
this.$tip('文本', tipOptions)
// 快捷方法 注意: 快捷方法指定的位置或type优先级 > tipOptions
this.$tip.position('文本')
this.$tip.position('文本', tipOptions)
// loading 使用
vm = this.$loading('文本')
this.$loading.open('文本')
// 可自定义loadingOptions覆盖全局配置或默认配置
this.$loading('文本', loadingOptions)
// 关闭loading
vm.close()
this.$loading.close()
1.0.0
3 years ago