v

#v| 来源: 网络整理| 查看: 265

1.主要思路

这里讲的是v-loading的区域加载

获得使用v-loading指令的dom(使用targetDom指代); 将loading组件插入到targetDom中获取targetDom的宽高定位等样式,并赋值给loading组件样式,保证loading组件在区域内全覆盖需要注意的是:loading组件需要脱离文档流,如果targetDom没有定位属性,需要补充上position: relative, 并且loading组件需要决对定位position: absolute 2.文件结构 @/components/VLoading ├─ index.js └─ v-loading.vue 复制代码 3.组件使用 3-1.组件注册 //在项目的main.js文件中注册组件 import VLoading from "@/components/VLoading/index.js" ... Vue.use(VLoading) 复制代码 3-2.组件使用 this is a test export default{ data(){ return { loading: true } }, Mounted(){ window.setTimeout(()=> { this.loading = false }) } } 复制代码 4.组件代码 4-1. v-loading.vue 加载中... export default{ data(){ return { visible: true } } } div{ position: absolute; top: 0; left:0; width: 100%; height: 100%; z:index: 9999 } 复制代码 4-2. index.js import loadingComponent from "./v-loading.vue" const renderComponent = (component) => { //接受组件实例, 返回组件的真实Dom树和组件实例 const Constructor = Vue.extend(component) const instance = new Constructor() const dom = instance.$mount().$el return { instance, dom } } export default { install(Vue){ const { instance, dom } = renderComponent(loadingComponent) Vue.directive("loading", { bind(el, binding) { Vue.nextTick(()=>{ //获取绑定指令的元素的计算样式 const style = window.getComputedStyle(el,null) if(style.position === "static") el.style.position = "relative" el.appendChild(dom) instance.visible = Boolean(binding.value) el.instance = instance }) }, update(el, binding){ el.instance.visible = Boolean(binding.value) } }) } } 复制代码 5. 补充说明 5-1.关于vue插件的问题

官方文档: Vue-plugins

import VLoading from "@/components/VLoading/index.js" Vue.use(VLoading) //等价于 if(isFunction(Vloading)){ VLoading(Vue) }else if(isFunction(Vloading?.install)){ VLoading.install(Vue) } //所以VLoading需要导出带有install方法的对象,或者一个insatll函数复制代码 5-2.关于组件实例化的问题

官方文档: Vue-extend

官方文档: vm-mount

const renderComponent = (component) => { // 使用Vue.extend生成组件构造器 const Constructor = Vue.extend(component) // 生成一个组件实例 const instance = new Constructor() // 将组件挂载后拿到真实dom const dom = instance.$mount().$el ... } 复制代码

【本文地址】

v

v

今日新闻

推荐新闻