Vue.extend使用场景

Vue.extend官方使用案例
Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。

应用场景
在 vue 项目中，初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：

1. 组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
2. 所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？
   这时候，Vue.extend + vm.$mount 组合就派上用场了。

官网解释： 使用基础 Vue 构造器 Vue.extend，创建一个“子类”。参数是一个包含组件选项的对象。
需要注意 - 在Vue.extend()中 data 选项必须是函数。

一般，我们会用 Vue.extend 接收一个组件对象来创建一个构造器，再利用创建的构造器 new 一个实例，并将这个实例挂载到一个元素上。

官网示例：

<div id="mount-point"></div>;
// 创建构造器
var Profile = Vue.extend({
  template: "
{{firstName}} {{lastName}} aka {{alias}}
",
  data: function () {
    return {
      firstName: "Walter",
      lastName: "White",
      alias: "Heisenberg"
    };
  }
});
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount("#mount-point");

需求： 将原项目中所有用 Element 的 Message 消息提示组件的地方，改为类似element-ui的MessageBox组件的样式：
封装原因：
原来都是用的 Elemnet 的 Message 组件，但当前需要改成最右边的样式，因需要拖动功能以及如添加功能请求后台时，显示“保存中…”的情况需要一个进度条加载效果，element的MessageBox组件无法满足需求，故封装了自己封装了一个

import Modal from "@/components/Modal.vue";
import Vue from "vue";
import eventBus from "@/plugins/mitt.js";
let msgModal = Vue.extend(Modal);

msgModal.install = function (Vue) {
  Vue.prototype.$cf = function (...args) {
    let instanceModal = new msgModal({ el: document.createElement("div") });

    document.querySelector("body").appendChild(instanceModal.$el);

    instanceModal.footer = true;
    instanceModal.visible = true;
    instanceModal.close = false;
    let cfObj = null;

    [instanceModal.msg, instanceModal.title, cfObj] = args;

    if (cfObj) {
      for (let key in cfObj) {
        instanceModal.cfOptions[key] = cfObj[key];
      }

      // 让progress有一个加载的过渡效果
      instanceModal.cfOptions.percentage = 30;
      setTimeout(() => {
        instanceModal.cfOptions.percentage = cfObj.percentage;
      }, 200);
    }

    return new Promise((resolve, reject) => {
      eventBus.on("confirm", data => {
        resolve(data);
      });

      eventBus.on("cancel", reason => {
        reject(reason);
      });
    });
  };
};

export default msgModal;