发布于 4年前

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());
Vue
©2020 edoou.com   京ICP备16001874号-3