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)
            }
        })
    }
}