v-loading指令

v-loading 的次要思路

这里讲的是 区域加载

• 导入loading组件， 取得loading组件的dom, 插入到绑定v-loading指令的parentNode中。
• 获取parentNode的宽高定位等款式， 赋值给loading组件款式, 来保障loading组件在区域内全笼罩。
• 这里要留神的是: loading组件肯定是要脱离文档流的，所以肯定是有position: absolute，所以，如果parentNode没有定位属性，要给parentNode加上position: relative

代码实现

/* main.js */
//...
import Loading from "./components/Loading/index.js"
Vue.use(Laoding)
//...

/* components/Loading/loading.vue */
<template>
    <div style="position: absolute" v-show="visible">组件正在加载,请耐性期待<div>
</template>
<script>
    export default {
        data(){
            return {
                visible: true
            }
        }
    }
</script>

/* components/Loading/index.js */
// 为了不便浏览，代码没有再做封装和优化
import loading from "./loading.vue"
export default  {
    install(Vue){
        const Constructor = Vue.extend(loading)
        const loadingComponent = new Constructor()
        const loadingComponentDom = loadingComponent.$mount().$el
        Vue.directive("loading", {
            bind(el,binding){
                //须要等到dom更新后，能力拿到parentNode即el的款式
                Vue.nextTick(()=>{
                    const style = window.getComputedStyle(el,null)
                    loadingComponentDom.style.width = style.width
                    loadingComponentDom.style.height = style.height
                    if(style.position === "static") {
                        el.style.position = "relative"
                    }
                    el.appendChild(loadingComponentDom)
                    loadingComponent.visible = Boolean(binding.value)
                    el.instance = loadingComponent
                })
            },
            update(el,binding){
                el.instance.visible = Boolean(binding.value)
            }
        })
    }
}