Vue 2 自定义指令的使用方法与应用场景

在 Vue 2 中，自定义指令是一种强大的功能，允许你直接操作 DOM 元素。自定义指令通常用于需要对 DOM 进行底层操作的场景，比如聚焦输入框、绑定事件、操作样式等。

1. 自定义指令的定义

自定义指令可以通过 Vue.directive 方法全局注册，也可以在组件内部通过 directives 选项局部注册。

全局注册

Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中时调用
  inserted: function (el) {
    el.focus(); // 聚焦元素
  }
});

局部注册

export default {
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      }
    }
  }
};

2. 自定义指令的钩子函数

自定义指令可以定义以下几个钩子函数：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
• update：所在组件的 VNode 更新时调用，但可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

3. 自定义指令的应用场景

3.1 自动聚焦输入框

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

使用方式：

<input v-focus>

3.2 绑定事件

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      if (!(el === event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent);
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent);
  }
});

使用方式：

<div v-click-outside="handleClickOutside">
  Click outside me!
</div>

3.3 操作样式

Vue.directive('highlight', {
  bind: function (el, binding) {
    el.style.backgroundColor = binding.value || 'yellow';
  }
});

使用方式：

<div v-highlight="'lightblue'">
  This will be highlighted.
</div>

3.4 权限控制

Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    const { value } = binding;
    const permissions = vnode.context.$store.getters.permissions;
    if (!permissions.includes(value)) {
      el.parentNode.removeChild(el);
    }
  }
});

使用方式：

<button v-permission="'edit'">Edit</button>

4. 总结

自定义指令在 Vue 2 中是一个非常灵活的工具，适用于需要对 DOM 进行底层操作的场景。通过自定义指令，你可以封装一些通用的 DOM 操作逻辑，使得代码更加简洁和可维护。常见的应用场景包括自动聚焦、事件绑定、样式操作、权限控制等。