Vue封装loading加载指令

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

文章目录

前言

一、自定义封装指令

二、使用方法

1.全局注册

2.局部注册

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

binding获取参数值

四、自定义加载指令

 

总结

---

---

前言

      之前用vue做了一个实现增删查改的记账本案例，实现基本功能，但是在实践中，我们几乎用的是vue的工程化开发，通过vue的脚手架，今天讲述一个基于Vue工程化开发的自定义封装指令，先讲述什么是自定义封装指令，然后再做一个自定义封装加载页面指令来加深理解。

---

一、自定义封装指令

      在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>

 

 

总结

  以上就是今天的内容，主要对自定义指令内容做了个讲解，为什么需要自定义指令以及自定义指令的分类，以及最后做了一个加载自定义指令的使用。