vue插件学习 - Loading插件开发

什么是vue插件

• 插件需要一个install方法，用于在初始化时候执行
• install方法默认入参 Vue，为vue构造器
• install方法可选入参 options，用于传入一些配置选项
• 在install中需要创建一个示例方法，如Vue.prototype.$loading = {}，$loading就是你在项目中调用的名称

创建Loading插件

基础代码

Loading插件需要两个方法，一个为显示，一个为隐藏，同时需要一段模板，代码结构如下

import loading from './loading.vue' // loading模板
    
let instance = null // 检测实例是否创建的标志位
let Loading = {}
Loading.install = (Vue) => {
  Vue.prototype.$loading = { // $loading即是你后期调用的名称
    show () {},
    hide () {}
  }
}
export default Loading

我们会在show方法中创建loading实例，并挂在到页面上，通过instance进行记录。在hide方法时，判断是否存在，如存在，则销毁

实现loading.vue

设置过度动画，根据show值的变化，调用destroy方法

<transition name="fade" appear @afterLeave="destroy">
  <div class="loading-container" v-if="show">
    <!-- ... -->
  </div>
</transition>

loadingClass为不同的loading样式，show控制显隐。根据上面hook，在show为false时候，会直接销毁该实例

export default {
  data () {
    return {
      show: true,
      loadingClass: ''
    }
  },
  methods: {
    destroy () {
      this.$el.remove()
      this.$destroy()
    }
  }
}

实现show和hide方法

根据需求，show方法中，根据判断条件，展示不用的loading样式

show () {
  const Loading = Vue.extend(loading) // 扩展vue实例，引入loading
  // TODO 判断条件，传输不同的配置数据
  const initObj = {
    data: {loadingClass: 'xxx'}
  }
  const root = document.getElementById('App')
  instance = new Loading(initObj).$mount() // 创建loading实例并挂载
  root.appendChild(instance.$el) // 向指定目录添加dom
},
hidden () {
  // 只有实例存在，才会隐藏
  if (!instance) return
  instance.show = false
}

使用方法

import Loading from './loading'
Vue.use(Loading)
// 调用$loading
that.$loading.show()
that.$loading.hide()

不按套路，直接引入组件

上面的Loading.install方法，最终是在Vue.prototype上扩展了$loading方法，那么我们可以不用写默认的install方法，直接扩展即可，代码如下

import loading from './loading.vue'
let instance = null
export default function (Vue) {
  Object.defineProperty(Vue.prototype, '$loading', {
    value: {
      show () {
        // 代码如上
      },
      hidden () {
        // 代码如上
      }
    }
  })
}

参考资料

• vue.js关于Object.defineProperty的利用原理