vue2-toast-alert
v1.6.1
Published
基于vue做的 吐司提示框,loading框,alert弹框。
Downloads
9
Maintainers
Readme
vue2-toast-alert
集弹框,loading,吐司为一体的vue插件
下载
npm i vue2-toast-alert -S
or
cnpm i vue2-toast-alert -S
全局引入
import Toast from 'vue2-toast-alert';
Vue.use(Toast);
使用
1. toast吐司
this.$toast( msg , options)
this.$toast('您拨打的电话已关机~')
this.$toast('您拨打的电话已关机~',{duration: 3000 , position:'bottom'})
使用说明
msg 提示语 options 配置选项 -- duration (number) 提示时长 | default: 2000 -- position (string)在页面的展示位置 | default:center | 可选项 bottom , top , center
2. loading加载框
this.$loading();
this.$hideLoading();
使用说明
loading() 为弹出loading hideLoading() 为关闭loading
3. alert弹框
this.$alert(msg options)
this.$alert('确定要删除吗')
this.$alert('确定要删除吗',{showTitle:true, title:'TITLE'})
this.$alert('确定要删除吗',{sureColor:'#f50'}).then(()=>{ console.log('确定')})
this.$alert('hideAlert') //close alert
this.$alert('确定要删除吗',{
sureColor:'#f50',
cancelColor:'#000',
confirm:true ,
cancelTxt:'no no no',
sureTxt:'好滴'
}).then((result)=>{
if(result.cancel){
console.log('点击取消')
}
if( result.confirm){
console.log('点击确定')
}
})
使用说明
该方法返回一个状态为fullfiled的promise对象 msg 提示语 options 配置选项
- showTitle (boolean) 是否展示标题 | default: false
- title (string) 提示框标题文案 | default: 提示
- sureTxt (string) 确定按钮的文案 | default: 确定
- sureColor (string) 确定按钮颜色 | default: #007AFF
- cancelTxt (string) 取消按钮的文案 | default: 取消
- cancelColor(boolean) 取消按钮颜色 | default: #333333
- result (object) 点击按钮后调用then的结果 | default: {cancen:false , confirm:false} | 点击取消 cancel为true , 点击确定 confirm为true