自定义指令自定义局部指令自定义全局指令指令的封装

本文链接：https://blog.csdn.net/qq_43157612/article/details/115532180

自定义指令

概念

vue 官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外 vue 还允许开发者自定义指令
有时候内置指令并不能满足我们所有场景的需求，或者说有时候我们想为元素附加一些特别的功能，这时候就可以通过自定义指令来实现

vue 中的自定义指令分为两类，分别是：
⚫ 局部自定义指令：组件内定义的指令，只有在当前组件中可以使用
⚫ 全局自定义指令：通过Vue创建的指令，可以在所有组件中使用

一 .自定义局部指令

1.定义局部自定义指令

局部自定义指令需要在组件的directives结构中定义，它是一个单独的结构

语法

directives:{
    指令名称：{
        inserted(el,binding){ 		
         }
     }
}

说明

inserted钩子函数：被绑定元素插入父节点时调用，它只会触发一次
如果想在dom更新时也触发自定义指令，可以添加updated钩子函数
关于钩子函数的参数
1. el:指令所绑定的元素，可以用来直接操作 DOM
2. binding:一个对象，包含多个属性，特别是里面的value，通过它可以获取指令的绑定值，当用户给指令绑定了值的时候，通过binding.value可以获取

注意：el和binding只是形参，可以自定义参数的名称

2.使用局部自定义指令

和之前的内置指令一样，使用v-指令名称来使用我们自定义的指令
在使用指令的时候，可以为指令绑定动态参数(从binding.value获取)

代码演示

品牌名称:<input type="text"
             v-model="userdata.brandName"
             v-myfocus
             v-mycolor='"red"'>
----------------------------------------------------------------------
// 添加局部自定义指令
  directives: {
    myfocus: {
      // el就是当前绑定这个指令的元素，可以用来直接操作dom
      inserted (el) {
        el.focus()
      }
    },
    mycolor: {
      inserted (el, binding) {
        el.style.color = binding.value
      }
    }
  }

二 .自定义全局指令

1.定义全局自定义指令

语法

一般选择在src/utils 文件夹下定义项目所用公共工具
语法格式

// 全局指令
Vue.directive(指令名称,{
    // 配置及处理
    inserted(el,binding){
        
    }
})

暴露所写的全局自定义指令

 import Vue from 'vue'

 export const mycolor = Vue.directive('mycolor',{
     inserted(el,binding){
         el.style.color = binding.value
     }
 })

说明：

使用Vue.component创建全局自定义指令
代码逻辑跟自定义局部指令一样注意书写格式
inserted钩子函数：被绑定元素插入父节点时调用
el,binding:钩子函数的参数
在每个组件中都能引入使用

2.使用全局自定义指令

引入定义好的全局指令
v-指令名称使用这个全局指令

// 引入全局指令
import  youcolor  from '@/utils/mydirectives.js'
// 使用全局指令
品牌名称:<input type="text"
             v-model="userdata.brandName"
             v-myfocus
             v-mycolor='"red"'>
----------------------------------------------------------------------
// 定义全局指令
import Vue from 'vue'

export const youcolor = Vue.directive('youcolor', {
  inserted (el, binding) {
    el.style.color = binding.value
  }
})

三 .指令的封装

步骤

不用再引入vue
封装指令的配置主体 const 自定义指令名称 = {inserted(el,binding){}}
暴露封装的自定义指令 export
在需要的位置使用解构的方式引入 import {指令名} from '封装指令的文件的路径'
注册指令 directives:{指令名}
使用按照内置指令的方式来使用 (正常使用)

代码演示:

// 引入全局指令
import  {youcolor}  from '@/utils/mydirectives.js'
// 注册指令 
directives: {
    youcolor
}
// 使用全局指令
品牌名称:<input type="text"
             v-model="userdata.brandName"
             v-youcolor='"red"'>
----------------------------------------------------------------------
// 定义指令--封装 暴露
export const youcolor = {
  inserted (el, binding) {
    el.style.color = binding.value
  }
}