cube-ui 弹窗的封装全局调用
utils文件夹下index.js文件里
// 公共的确认弹窗
function confirmDialog(title, content, $confirm) {
return this.$createDialog({
type: "confirm",
icon: "",
title: title,
content: content,
confirmBtn: {
text: "确定",
active: false,
disabled: false,
href: "javascript:;"
},
cancelBtn: {
text: "取消",
active: true,
disabled: false,
href: "javascript:;"
},
onConfirm: $confirm, // 取消事件为空,弹窗也消失
onCancel: () => {}
}).show();
}
export { confirmDialog }
在main.js全局注册
// 引入
import { showToast, confirmDialog } from "./utils/index";
// 挂载
Vue.prototype.confirmDialog = confirmDialog;
// 页面上的调用
this.confirmDialog("标题", "确定取消订单", this.cancelOderFun);
this.cancelOderFun;是一个接口的调用方法;
需要注意的是:调用的是一个方法名字。而不是要触发。
这样写则在弹窗出现时会,直接调用确定的事件。是不符合我们的逻辑的。
this.confirmDialog("标题", "确定取消订单", this.cancelOderFun());