vue 自定义指令

一、什么是指令

在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统，我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

常见的vue内置指令有：v-if，v-show，v-for，v-bind，v-model 等。

二、如何实现一个自定义指定

Vue的指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为。以 v-if 为例，其中，v- 是Vue的标识，if是指令 ID。

Vue自定义指令有注册有两种方式：全局指令注册和局部指令注册。

1.全局指令注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
 
 
<!-- 当页面加载时，该元素将获得焦点 -->
<input v-focus />

2.局部指令注册

// 注册一个局部自定义指令 `v-focus`
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
 
<!-- 当页面加载时，该元素将获得焦点 -->
<input v-focus />

3.自定义指令钩子函数如下：

钩子函数	描述
bind	只调用一次，在指令第一次绑定到元素时触发。可以在这里进行初始设置、绑定事件监听器等操作。
inserted	在被绑定元素插入父节点时触发。如果指令绑定的元素是动态生成的，在插入后才会触发。
update	在指令所在模板更新时触发，不论绑定值是否发生变化。可以通过比较更新前后的绑定值，以便在需要时执行相应的操作。
componentUpdated	在被绑定元素所在模板完成一次更新周期时触发。如果需要在每次更新时执行操作，可以选择使用这个钩子函数。
unbind	只调用一次，在指令与元素解绑时触发。可以在这里进行清理工作、移除事件监听器等操作。

4.钩子函数示例：

Vue.directive('my-directive', {
  bind: function(el, binding) {
    // 指令绑定时执行的操作
  },
  inserted: function(el, binding) {
    // 元素插入父节点时执行的操作
  },
  update: function(el, binding) {
    // 指令所在模板更新时执行的操作
  },
  componentUpdated: function(el, binding) {
    // 模板完成一次更新周期时执行的操作
  },
  unbind: function(el, binding) {
    // 指令与元素解绑时执行的操作
  }
})

三、应用场景

场景	描述
数据脱敏	对敏感数据（如手机号、邮箱等）进行脱敏处理，以保护用户隐私。
表单验证	自定义指令可以用于实现表单验证逻辑，例如自定义输入框的校验规则、密码强度检查等。
权限控制	自定义指令可以用于根据用户的权限控制元素的显示与隐藏，例如根据用户角色来显示或隐藏某些功能按钮。
脚注/水印	自定义指令可以用于添加页面的脚注或水印效果，例如在页面的底部添加版权信息或在图片上添加水印。
响应式绑定	自定义指令可以用于实现响应式的绑定操作，例如监听窗口大小变化、监听滚动事件等。
懒加载图片	自定义指令可以用于实现图片的懒加载，延迟加载图片，减少页面的加载时间和带宽消耗。
拖拽排序	自定义指令可以用于实现拖拽排序的功能，例如在列表中通过拖拽元素来改变元素的顺序。
复制到剪贴板	自定义指令可以用于实现点击元素后将内容复制到剪贴板的功能，提供更方便的复制操作。
图片预览	自定义指令可以用于实现图片的预览功能，例如在鼠标悬停或点击图片时显示放大预览效果。
实时搜索	自定义指令可以用于实现实时搜索的功能，根据用户输入的关键字动态显示匹配的搜索结果。
限制输入字符	自定义指令可以用于限制用户在输入框中输入的字符类型或字符长度，例如只能输入数字或限制最大输入长度。

四、演示

1.通过指令，指定输入框文字颜色

<! -- 通过指令，指定输入框文字颜色-->
<input v-color="'red'">
 
Vue.directive('color', {
  bind: function (el,bind) {
    // 设置文字颜色
    el.style.color = bind.value
  }
})

2.通过指令，对手机号进行脱敏

<!-- 通过指令，设置手机号脱敏 -->
<div v-mask-phone="'13612345678'"></div>
 
 
// 在Vue实例中注册自定义指令，并在钩子函数中对手机号进行脱敏处理
Vue.directive('mask-phone', {
  bind: function (el, binding) {
    // 获取手机号
    const phoneNumber = binding.value
 
    // 脱敏处理
    const maskedPhoneNumber = phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
 
    // 更新元素的内容
    el.textContent = '手机号码：' + maskedPhoneNumber
  }
})