vue移动端模态框（可传参）

1-封装模态框组件Mydialog (样式可以自己写)

2-使用方法1
页面中引入在进行调用

(1) import Mydialog from '../carrer/mydialog.vue';
(2)引入组件
 components: {
    Mydialog
  }
 （3） 在html中插入组件
 

data中的参数

 showDialog: false,
      dialogOption: {
        text: '欢迎',
        cancelButtonText: '否',
        confirmButtonText: '是',
        isShowCancelButton: ''
    },

methods中 在需要出现弹框时候让其显示就好啦

 showDialog()
      this.dialogOption.text = ` 
确认拒绝？
 `;
      this.dialogOption.isShowCancelButton = true
      this.showDialog = true;
      this.$refs.mydialog.confirm().then(() => {
        this.showDialog = false;
        this.refuse(id)
      }).catch(() => {
        this.showDialog = false;
      })
    },
      

3.使用方法2
因为在项目中经常要使用到，而且每次使用的时候都要带上相同的参数，所以就封装了一个js，（模态框的工具类），使用的时候调用就好了

1)- 新建一个js文件dialogUtil，复制下面的代码就好了

class normalDialog {
  constructor(args) {
    // console.log("args",args);
    this.parent = args.parent;
    this.isShowDialog = args.isShowDialog;
    this.dialogOption = this.parent[args.dialogOption];
    this.mydialog = this.parent.$refs[args.mydialog];
    // console.log("dialogOption=",this.dialogOption);
  }

  showDialog(text, showCancelButton, success, error) {
    console.log("showDialog=="+text);
    this.dialogOption.text = text || "请输入弹框标题";
    let suc = typeof showCancelButton == "function" ? showCancelButton : success;
    let err = typeof showCancelButton == "function" ? success : error;
    if (typeof showCancelButton != "function") {
      this.dialogOption.isShowCancelButton = !!showCancelButton;
    } else {
      this.dialogOption.isShowCancelButton = true;
    }
    this.parent[this.isShowDialog] = true;
    this.confirm(suc, err);
  }

  //弹框回调
  confirm(success, error) {
    let self = this;
    this.mydialog.confirm().then(() => {
      typeof success == "function" && success();
      self.parent[this.isShowDialog] = false;
    }).catch(() => {
      typeof error == "function" && error();
      self.parent[this.isShowDialog] = false;
    })
  }

  toString() {
    // console.log(this.name + " : " + this.age);
  }

}


export default {
  //args：参数， 类型
  creatByType(args, type) {
    type = !!type ? type : 1;

    switch (type) {
      case 1:
        return new normalDialog(args)
        break;
      case 2:
        break
      default:
        break;
    }
  }
}

2) 因为很多页面都用到，所以让他成为全局的（在main中引入就好了），那么别的页面使用就不需要引入了

import dbDiaLogUtil from './assets/js/dialogUtil'
Vue.prototype.$dbDiaLogUtil = dbDiaLogUtil;

3)在使用的时候
页面中引入组件在进行调用

(1) import Mydialog from '../carrer/mydialog.vue';
(2)引入组件
 components: {
    Mydialog
  }
 （3） 在html中插入组件
 

在data（）中用对象的形式

    isShowDialog : false,
      dialogOption:{text: '',cancelButtonText: '否',confirmButtonText: '确认',isShowCancelButton: false},
      dialogNormal:null,

在mounted中进行初始化

    this.dialogNormal = this.$dbDiaLogUtil.creatByType({parent:this,isShowDialog:'isShowDialog',dialogOption:'dialogOption',mydialog:'mydialog'});

最后在需要弹框的地方调用，一句代码搞定啦

        this.dialogNormal.showDialog('dialog要显示的内容',function(){console.log('成功执行的')} , function(){console.log('失败执行的')})

初来乍到，如有不对的还请指教...