Vue自定义插件

个人学习Vue上的一些总结，重新看了一遍Vue官方 api写了一个loading组件

插件的话其实就是正常vue组件+挂载到原型

<template>

  <div id="loading-plugins" ref="root" v-show="showFlag">
    <div class="load-box">
      <div class="load-circle"></div>
    </div>
  </div>

</template>

<script language="JavaScript">
	export default {
    data () {
	    return {
        showFlag: false
      }
    },
    created () {
    },
    methods: {
        changeView (obj) {
          if (obj) {
            this.$nextTick(() => {
              this.$refs['root'].style.height = obj.clientHeight + 'px'
              this.$refs['root'].style.width = obj.clientWidth + 'px'
            })
          } else {
            this.$nextTick(() => {
              this.$refs['root'].style.height = window.innerHeight + 'px'
              this.$refs['root'].style.width = window.innerWidth + 'px'
            })
         }
        },
        async show (obj = undefined) {
          await this.changeView(obj)
          this.showFlag = true
        },
        hide () {
          this.showFlag = false
        }
    }
	}
</script>

#loading-plugins
  position absolute
  top 0
  left 0
  display: flex
  justify-content: center
  align-items: center
  z-index 999
  background: rgba(255,255,255,.5)
  .load-box
    height: 50px
    width: 80px
    display :flex
    justify-content: center
    align-items: center
   .load-circle
      width: 30px
      height: 30px
      border-radius: 50%
      border: 2px solid
      border-color rgba(0,0,0,.8)
      border-left-color transparent
      animation: loading .8s linear infinite
@keyframes loading
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)



这里是loading组件的代码可以使用component挂载到你想用的地方，但是如何让它只调用this.$loading.show/hide去控制显示和隐藏呢？

import Loading from '@/components/general/loading'

export default {
  /**
   * 每个插件都有的install方法，用于安装插件
   * @param {Object} Vue - Vue类
   * @param {Object} [pluginOptions] - 插件安装配置
   */
  install (Vue, pluginOptions = {}) {
    // 创建"子类"方便挂载
    const VueLoading = Vue.extend(Loading)
    let loading = null
    function show (obj = undefined) {
      return new Promise((resolve) => {
        if (!loading) {
          let ele = document.querySelector('body')
          if (obj) {
            ele = obj
            obj.style.position = 'relative'
          }
          loading = new VueLoading()
          loading.father = obj
          loading.$mount()
          loading.show(obj)
          ele.appendChild(loading.$el)
          resolve()
        }
      })
    }
    function hide () {
      if (loading) {
        loading.hide()
        loading = null
      }
    }
    let $load = {
      show (obj) {
        show(obj)
      },
      hide () {
        hide()
      }
    }
    Object.assign($load, loading)
    Vue.prototype.$loading = $load //这里把load组件挂载到　Vue原型链上
  }
}

这里是定义的loading.js 根据插件定义的原理在导出的对象里面定义一个install函数（当Vue.use时调用）

到这里只剩下最后一步了：
import VueLoading from '@/components/plugins/loading'
Vue.use(VueLoading)


在main.js使用Vue.use()一下这个组件