vue.js中toast用法及使用toast弹框的实例代码
程序员文章站
2022-06-30 10:58:56
1.首先引入
import { toast } from 'vant'
写个小列子
绑定一个click事件
2.写事件
在methods写方法...
1.首先引入
import { toast } from 'vant'
写个小列子
绑定一个click事件
2.写事件
在methods写方法
showtoast() { this.$toast({ message: "今日签到+3", }) },
3.效果图如下
一个简单的toast提示成就好了
下面通过实例代码看下vue 中使用 toast弹框
import { toastplugin,confirmplugin,alertplugin} from 'vux' vue.use(toastplugin) vue.use(confirmplugin) vue.use(alertplugin) //公用的弹窗(全局变量) vue.prototype.showtoast = function( showpositionvalue,type,text,width="10em"){ this.$vux.toast.show({ showpositionvalue: false, text: text, type: type, width: width, position: 'middle' }) } //公用alert confirm const message = {}; message.install = () => { 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:'提示', content:'系统异常,请重新登录后再试!', 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弹框的实例代码,希望对大家有所帮助
上一篇: 蕨菜是苦菜吗,一起来看看
下一篇: php实现的漂亮分页方法