vue.js中toast用法及使用toast彈框的實例代碼

import { Toast } from 'vant'

showToast() {
 this.$toast({
 message: "今日簽到+3",
 })
 },

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('取消訂單了')；
 }
});