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('失败执行的')})上述就是小编为大家分享的使用vue怎么实现移动端模态框了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
