什么是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 () {
// 代码如上
}
}
})
}
