编写 vue 插件

loadingPlugin.js

import Loading from './Loading.vue'

let $vm

export default {
    // 核心: Vue.js 的插件应该暴露一个 install 方法。
    // 这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：
    install(Vue, options) {

        // Vue.use(plagin, options)
        console.log('LoadingPlugin options..........', options);
        if (!$vm) {
            // Vue.extend(Loading) 创建一个“子类”。
            const LoadingPlugin = Vue.extend(Loading);
            // 挂载loading组件实例
            $vm = new LoadingPlugin({
                el: document.createElement('div')
            });
            // 将loading组件追加到页面上
            document.body.appendChild($vm.$el);
        }
        $vm.show = false;
        let loading = {
            open(text) {
                $vm.show = true;
                $vm.text = text;
            },
            close() {
                $vm.show = false;
            }
        };
        if (!Vue.$loading) {
            Vue.$loading = loading;
        }

        // 全局混入的方式注入组件选项
        Vue.mixin({
            created() {
                this.$loading = Vue.$loading;
            }
        })
    }
}

Loading.vue

<template>
  <div class="loading-box" v-show="show">
    <div class="loading-content">
      <span :tip="text">正在加载中...</span>
    </div>
  </div>
</template>

main.js

import LoadingPlugin from '@/plugins/loadingPlugin.js'

Vue.use(LoadingPlugin, { loading: true })

在页面中使用

  created() {
    this.$loading.open("正在加载中...");
  },