【Vue】自定义指令

       📝个人主页：五敷有你      
 🔥系列专栏：Vue
⛺️稳重求进，晒太阳

自定义指令

之前的v-html v-model v-for 等都是内置指令

自定义指令：自己定义的指令，可以封装一些dom操作，扩展额外功能

需求：当页面加载时，可以让元素获得焦点

操作dom：dom元素.focus()

mounted(){
  this.$refs.inp2.focus()
}

全局注册：-语法

Vue 自动将我们的 自定义指令添加上了 v- 前缀。

//全局注册指令
Vue.directive("指令名",{
  //insert会在指令所在元素被插入到页面中触发
  "inserted" (el){
    //可以对el标签扩展额外的功能
    el.focus()
  }
})

局部注册：-语法

//局部注册指令
directives:{
  //指令名：指令配置项
    focus:{
      inserted(el){
        el.focus()
      }
    }
}

指令的值

• 语法：在绑定指令的时候，可以通过“等号”的形式为 指令 绑定具体的参数值

<div :v-color="red">指令的值</div>

• 通过binding.value 可以拿到指令值。指令值修改会触发 update函数
• 通过update钩子，可以监听指令值的变化

//局部注册指令
directives:{
  //指令名：指令配置项
    color:{
      inserted(el,binding){
        el.style.color=binding.value
      },
      update(el,binding){
        el.style.color=binding.value
      }
    }
}

封装v-loading指令

分析：

• 本质loading效果就是一个蒙层，盖在了盒子上。
• 数据请求中，开启loading状态，添加蒙层
• 数据请求完毕，关闭loading状态，移除蒙层

实现：

1. 准备一个loading类，通过伪元素定位，设置宽高，实现蒙层
2. 开启关闭loading状态(添加移除蒙层)，本质只需要添加移除类即可
3. 结合自定义指令的语法进行封装复用