vue移动端模态框(可传参)的实现(2)

showDialog() this.dialogOption.text = ` <p>确认拒绝？</p> `; 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中插入组件

<Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>

在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('失败执行的')})