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