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

转载于:https://www.cnblogs.com/ch-zaizai/p/7573203.html