zoukankan      html  css  js  c++  java
  • 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,
    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('取消订单了');
    }
    });
  • 相关阅读:
    C++内置类型对象之间的转换
    快速排序
    面试题7:用两个栈实现队列
    面试题6:重建二叉树
    poj 3264(线段树)
    poj 3038
    poj 并查集
    poj 1270(toposort)
    poj 2503(字符串)
    poj 3687(拓扑排序)
  • 原文地址:https://www.cnblogs.com/ch-zaizai/p/7573203.html
Copyright © 2011-2022 走看看