vue如何封装一个全局组件

---

date: 2017-12-03 10:40:49
tags:

---

背景

上篇介绍了如何封装一个react全局组件，这篇介绍下vue如何封装一个全局组件。

思路

通过Vue.extend(options)，使用基础 Vue 构造器，创建一个子类，再创建这个子类的实例，挂载到body元素上。具体看代码注释。

代码

index.js

import Vue from 'vue';
import Loading from './loading';
// 创建一个“子类”
let LoadingC = Vue.extend(Loading);
let instance;
export default {
    open (options = {}) {
        if (!instance) {
            this.initInstance(options);
        }
        instance.visible = true;
    },
    initInstance (options) {
        // 创建子类实例
        instance = new LoadingC({
            el: document.createElement('div')
        });
        // 传入属性
        instance.text = options.text || '加载中';
        for (var prop in options) {
            if (options.hasOwnProperty(prop)) {
                instance[prop] = options[prop];
            }
        }
        // 插到body里
        document.body.appendChild(instance.$el);
        Vue.nextTick(() => {
            instance.visible = true;
        });
    },
    close () {
        instance.visible = false;
    }
};

loading.vue