loading加载

“这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战”

loading自定义指令当在vue项目中请求后台接口时，常常会使用 loding 过渡数据的加载时间。由于请求服务端接口需要时间，在请求时加上一个loading logo效果将极大提升用户体验和减轻服务端压力。

2.API vue自身提供了一个注册指令的函数

directive

包含两个参数，第一个就是作为v-directive的名字，第二个是一个对象，主要对当前的需要这个指令做一些操作。

一个指令定义对象提供如下几个钩子函数（可选的）

bind，inserted，update，有需要的小伙伴可以去官网查看（附上地址：vue自定义指令

实现方案

这里我们主要讲一下在对象里面操作的东西，其他的就跳过了

我们可以利用inserted这个钩子函数，里面有两个参数，分别是el和binding，el是指定所绑定的元素，可以用来直接操作dom， binding是一个对象，包含一下的属性： name：指令名，value：指令的绑定值，oldvalue：指令绑定的前一个值，我们所需要的东西就这么多了。

const loadingDiractive={
    inserted(el,binding){
        console.log(el)
        console.log(binding)
    }
}

我们可以看看打印出来的是什么东西

可以看出打印出来的就是当前绑定的dom元素。

这里也可以看出打印出来的值，因为我们接下来要用这些值

我们在当前的js文件里面引入vue和loading.vue组件

我们会接着用到extends 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象

废话不多说，直接上代码

import Loading from './loading.vue'
console.log(Loading)
const loadingDiractive={
   
    inserted(el,binding){
        console.log(el);
        console.log(binding)
          const loadingCtor=Vue.extend(Loading)
          const loadingComp=new loadingCtor().$mount()
          el.instance=loadingComp
          if(binding.value){
              append(el)
          }
    },
    update(el,binding){
         if(binding.value!=binding.oldValue){
             binding.value ? append(el):remove(el)
         }
    }
    
}
function append(el){
    el.appendChild(el.instance.$el)
}
function remove(el){
    el.remove(el.instance.$el)
}

export default loadingDiractive

看看效果

瑞思拜

vue自定义指令loading

loading加载