vue.js中toast用法及使用toast弹框的实例代码
发布时间：2020-12-17 02:12:31 所属栏目：百科 来源：网络整理
导读：1.首先引入 写个小列子 绑定一个click事件 2.写事件 在methods写方法 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 { const msg = { alert: config => { let def = { title:'提示',content:'系统异常，请重新登录后
|
1.首先引入 写个小列子 绑定一个click事件
2.写事件 在methods写方法 3.效果图如下
一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 {
const msg = {
alert: config => {
let def = {
title:'提示',content:'系统异常，请重新登录后再试！',buttonText:'确定'
}
if(typeof config === 'string' || typeof config === 'number'){
Vue.$vux.alert.show(Object.assign(def,{content:config}));
}else{
Vue.$vux.alert.show(Object.assign(def,config));
}
},confirm: config => {
let isConfirm = false;
let def = {
title:'提示',confirmText:'确定',cancelText:'取消',onConfirm:() =>{
isConfirm = true;
}
}
if(typeof config === 'string' || typeof config === 'number'){
Vue.$vux.confirm.show(Object.assign(def,{content:config}));
}else{
Vue.$vux.confirm.show(Object.assign(def,config));
}
/*return new Promise((resolve,reject) => {
if(isConfirm){
resolve();
}
})*/
},}
Object.entries(msg).forEach(([method,fn]) => {
Vue.prototype[method] = fn;
})
}
Vue.use(Message)
//使用例子
_this.confirm({
title:'提示',content: '确定要关闭订单',onConfirm() {
console.log('取消订单了')；
}
});
总结以上所述是小编给大家介绍的vue.js中toast用法及使用toast弹框的实例代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
