什么是vue插件
- 插件需要一個(gè)install方法，用于在初始化時(shí)候執(zhí)行
- install方法默認(rèn)入?yún)?Vue，為vue構(gòu)造器
- install方法可選入?yún)?options，用于傳入一些配置選項(xiàng)
- 在install中需要?jiǎng)?chuàng)建一個(gè)示例方法塑陵，如
Vue.prototype.$loading = {}爱态，$loading就是你在項(xiàng)目中調(diào)用的名稱
創(chuàng)建Loading插件
基礎(chǔ)代碼
Loading插件需要兩個(gè)方法谭贪，一個(gè)為顯示，一個(gè)為隱藏肢藐，同時(shí)需要一段模板故河，代碼結(jié)構(gòu)如下
import loading from './loading.vue' // loading模板
let instance = null // 檢測(cè)實(shí)例是否創(chuàng)建的標(biāo)志位
let Loading = {}
Loading.install = (Vue) => {
Vue.prototype.$loading = { // $loading即是你后期調(diào)用的名稱
show () {},
hide () {}
}
}
export default Loading
我們會(huì)在show方法中創(chuàng)建loading實(shí)例吱韭，并掛在到頁(yè)面上吆豹，通過(guò)instance進(jìn)行記錄。在hide方法時(shí)理盆，判斷是否存在痘煤，如存在，則銷毀
實(shí)現(xiàn)loading.vue
設(shè)置過(guò)度動(dòng)畫猿规，根據(jù)show值的變化衷快，調(diào)用destroy方法
<transition name="fade" appear @afterLeave="destroy">
<div class="loading-container" v-if="show">
<!-- ... -->
</div>
</transition>
loadingClass為不同的loading樣式，show控制顯隱姨俩。根據(jù)上面hook蘸拔，在show為false時(shí)候，會(huì)直接銷毀該實(shí)例
export default {
data () {
return {
show: true,
loadingClass: ''
}
},
methods: {
destroy () {
this.$el.remove()
this.$destroy()
}
}
}
實(shí)現(xiàn)show和hide方法
根據(jù)需求环葵，show方法中调窍，根據(jù)判斷條件，展示不用的loading樣式
show () {
const Loading = Vue.extend(loading) // 擴(kuò)展vue實(shí)例张遭，引入loading
// TODO 判斷條件邓萨，傳輸不同的配置數(shù)據(jù)
const initObj = {
data: {loadingClass: 'xxx'}
}
const root = document.getElementById('App')
instance = new Loading(initObj).$mount() // 創(chuàng)建loading實(shí)例并掛載
root.appendChild(instance.$el) // 向指定目錄添加dom
},
hidden () {
// 只有實(shí)例存在，才會(huì)隱藏
if (!instance) return
instance.show = false
}
使用方法
import Loading from './loading'
Vue.use(Loading)
// 調(diào)用$loading
that.$loading.show()
that.$loading.hide()
不按套路菊卷，直接引入組件
上面的Loading.install方法缔恳，最終是在Vue.prototype上擴(kuò)展了$loading方法，那么我們可以不用寫默認(rèn)的install方法洁闰，直接擴(kuò)展即可歉甚，代碼如下
import loading from './loading.vue'
let instance = null
export default function (Vue) {
Object.defineProperty(Vue.prototype, '$loading', {
value: {
show () {
// 代碼如上
},
hidden () {
// 代碼如上
}
}
})
}
