Vue封装loading加载指令

在vue中，我们经常用到v-开头的指令，v-html，v-show等，他们都是有着对应的功能，那要是我们在一个页面中也有一个这样要经常使用的功能，且代码逻辑不变，如果每到要使用的时候就要再写一遍，这样很麻烦，其实和封装函数一样，都是在简化代码，便于再次使用，我们封装号这个指令后，就可以利用v-指令名来使用他了。

二、使用方法

自定义指令分为全局注册和局部注册

1.全局注册

在main.js中书写代码如下（示例）：

Vue.directive('指令名',{
   "inserted"(el){
    //对el元素的操作
 }
})

2.局部注册

在对应组件的js部分中书写代码如下（示例）：

directives:{
   "指令名":{
     inserted() {
      //对el元素的操作
    }
  }
}

el为添加自定义指令的元素标签

三、在自定义指令中添加参数

有些指令是可以添加参数值的，上面提及的是没有带参数的指令的情况，那么我们怎么拿到这个参数值呢

binding获取参数值

//定义一个div标签，指令名为v-color，它还要传进一个颜色值

<div v-color="red">我是一个盒子</div>

//js代码

directives:{

color:{

//利用binding获取

inserted (el,binding){

el.style.color=binding.value

}

}

}

四、自定义加载指令

在应用场景中，加载页面通常不会那么快响应出来，那么这时页面应该处于加载状态才行，才能提高用户的体验感，因此在数据响应完成前应该有一个加载画面，这时就可以将他们封装成一个指令进行使用

代码如下:

v-loading="show",show在data函数中定义为true，对元素标签拿到数据并赋值给对应数据渲染再页面后，再将show改为false，因为对数据进行了修改，所以触发了update函数，因此在做一次判断，就可以结束加载画面了

//在css中先写加载类名的样式
<style>
/* 添加伪元素类名使加载数据前渲染这个图片 */
.loading:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background: #fff url("./load.gif") no-repeat center; 
}
</style>
//在js中
<script>
// 自定义加载指令
  directives:{
    "loading":{
      // 判断是否要渲染这个伪元素
      inserted(el,binding){
        if(binding.value){
             el.classList.add('loading')
        }else{
          el.classList.remove('loading')
        }
      },
      // 修改数据后更新的操作
      update(el,binding){
        if (binding.value) {
          el.classList.add('loading')
        } else {
          el.classList.remove('loading')
        }
      }
    }
  }
</script>