共计 1220 个字符,预计需要花费 4 分钟才能阅读完成。
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)
}
})
}
}
正文完
发表至: javascript
2021-01-28