v-loading指令

Posted 2021-10-11 魔法少女郭德纲

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