模态框是我们 UI 控件中一个很重要的组件，使用场景有很多种，我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建。文档中的解释是 

在最近在做一个常用的类似下面的登录/注册业务场景时，利用 Vue.extend 来改善我们的代码，使我们代码逻辑更清晰化。

需求：点击登录或注册出现各自的模态框。

我们对于这种常见的登录注册业务，一般都是分为 Sigin.vue 和 Register.vue 两个组件，然后把两个组件写入 App.vue 组件中，或者是 layout.vue 组件中。

原来的这种使用，对于我们的整块的登录注册逻辑是分散的，一些需要登录或者是权限的逻辑，可能都需要特意去提取一个 Visible 来控制我们的登录框。

使用 Vue.extend 可以达到统一接口，不用逻辑分散，下面的示例，仅作参考，不了解该 api 使用的可以了解下，而了解的，欢迎指导?

组件

新建 LoginModel 目录，新建 Sigin.vue 和 Register.vue 两个组件

复制代码

再新建 index.vue 组件

import Sigin from "./sigin";
import Register from "./register";
export default {
components: {
Register,
Sigin
},
data() {
return {
show: false,
type: "sigin"
};
}
};

复制代码

创建子类

新建 index.js，导入我们的 index.vue

import Vue from "vue";import ModalCops from "./index.vue";

const LoginModal = Vue.extend(ModalCops); // 创建 Vue 子类

let instance;

const ModalBox = (options = {}) => {if (instance) {    instance.doClose();  }// 实例化  instance = new LoginModal({    data: {      show: true, // 实例化后显示      ...options    }  });  instance.$mount();document.body.appendChild(instance.$el); // 将模态框添加至 bodyreturn instance;};

// 对应的登录ModalBox.sigin = () => {return ModalBox({    type: "sigin"  });};

ModalBox.register = () => {return ModalBox({    type: "register"  });};

export default {install(Vue) {    Vue.prototype.$loginer = ModalBox;  }};

复制代码

创建完成后，我们可以在入口挂载到 Vue 实例上

// main.jsimport LoginModal from "./components/LoginModal";

Vue.use(LoginModal);复制代码

在需要登录/注册的地方只用调用

onLogin(type) {
this.$loginer({
type
})
}
复制代码

效果如下

验证事件

我们都知道模态框需要关闭事件，而像这种业务的关闭事件必然是需要验证提交信息，所以我们需要加上关闭回调函数。
修改 Sigin.vue 和 Register.vue 两个组件，添加事件

// Sigin.vue

export default {
name: "Sigin",
methods: {
onClick() {
this.$emit("sigin");
}
}
};

// Register.vue

click="onClick">注册确认

export default {
name: "Register",
methods: {
onClick() {
this.$emit("register");
}
}
};

复制代码

修改 index.vue 添加 $emit 事件

import Sigin from "./sigin";
import Register from "./register";
export default {
components: {
Register,
Sigin
},
data() {
return {
show: false,
type: "sigin"
};
},
methods: {
loginCallback() {
if (!this.ok) return;
this.ok().then(valid => {
if (valid) {
this.doClose();
}
});
},
doClose() {
this.show = false;
}
}
};

复制代码

修改 index.js 文件

import Vue from "vue";import ModalCops from "./index.vue";

const LoginModal = Vue.extend(ModalCops);

let instance;

const ModalBox = (options = {}) => {if (instance) {    instance.doClose();  }  instance = new LoginModal({    data: {      show: true,      ...options    }  });  instance.ok = () => {return new Promise(resolve => {const before = options.ok ? options.ok() : false;if (before && before.then) {        before.then(          () => resolve(true),          () => {console.log("reject");          }        );      } else if (typeof before === "boolean" && before !== false) {        resolve(true);      }    });  };  instance.$mount();document.body.appendChild(instance.$el);return instance;};

ModalBox.sigin = ok => {return ModalBox({    type: "sigin",    ok  });};

ModalBox.register = ok => {return ModalBox({    type: "register",    ok  });};

ModalBox.close = () => {  instance.doClose();  instance.show = false;};

export default {install(Vue) {    Vue.prototype.$loginer = ModalBox;  }};

复制代码

使用回调

onLogin(type) {const funcs = {    sigin: () => {console.log("登录请求");    },    register: () => {console.log("注册请求");    }  };this.$loginer({    type,    ok: () => {return new Promise((resolve, reject) => {// isOk 验证数据是否正确if (this.isOk) {          funcs[type]();          resolve();        } else {          reject();        }      });    }  });}复制代码

效果如下