Vue 3 中的自定义指令：增强模板功能

Vue.js 是一个灵活的框架，它允许开发者通过自定义指令来扩展 HTML 模板的功能。自定义指令可以用来直接操作 DOM，这在某些情况下比组件更为直接和方便。在 Vue 3 中，自定义指令的 API 有所变化，以更好地配合其响应式和组合式 API 的架构。

什么是自定义指令？

自定义指令是 Vue 中的一种特殊类型的"指令"，它们是带有 v- 前缀的特殊属性。内置的指令如 v-model、v-if、v-for 等，都是 Vue 处理 DOM 的内部指令。而自定义指令则允许你创建专属的 DOM 操作逻辑。

创建自定义指令

在 Vue 3 中，自定义指令可以通过 app.directive 方法注册全局指令，或者在组件内部作为 directives 选项定义局部指令。

全局自定义指令

javascript 复制代码

const app = Vue.createApp({});

app.directive('focus', {
  // 指令的定义
  mounted(el) {
    // 当绑定元素挂载到 DOM 上时聚焦元素
    el.focus();
  }
});

app.mount('#app');

局部自定义指令

javascript 复制代码

const app = Vue.createApp({});

app.component('custom-input', {
  template: '<input v-focus>',
  directives: {
    focus: {
      // 指令的定义
      mounted(el) {
        el.focus();
      }
    }
  }
});

app.mount('#app');

指令的钩子函数

自定义指令提供了几个钩子函数，你可以根据需要实现它们：

beforeMount: 在指令第一次绑定到元素并且在挂载父组件之前调用。
mounted: 在绑定元素的父组件被挂载后调用。
beforeUpdate: 在包含组件的 VNode 更新之前调用，但可能发生在其子 VNode 更新之前。
updated: 在包含组件的 VNode 及其子 VNode 全部更新后调用。
beforeUnmount: 在卸载绑定元素的父组件之前调用。
unmounted: 在卸载绑定元素的父组件之后调用。

每个钩子函数都会接收到与之相关的 DOM 元素，以及一个描述指令状态的上下文对象。

实例：创建一个工具提示指令

让我们创建一个简单的自定义指令 v-tooltip，当用户将鼠标悬停在元素上时，显示一个工具提示。

javascript 复制代码

app.directive('tooltip', {
  mounted(el, binding) {
    let tooltipText = document.createElement('span');
    tooltipText.className = 'tooltip-text';
    tooltipText.textContent = binding.value;
    el.appendChild(tooltipText);
    el.classList.add('tooltip-container');

    el.onmouseenter = () => {
      tooltipText.style.display = 'inline';
    };
    el.onmouseleave = () => {
      tooltipText.style.display = 'none';
    };
  },
  beforeUnmount(el) {
    // 清理我们的事件监听器
    el.onmouseenter = null;
    el.onmouseleave = null;
  }
});

在 CSS 中，你可以添加一些基本样式：

css 复制代码

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
}

然后在模板中使用这个指令：

html 复制代码

<button v-tooltip="'这是一个工具提示'">悬停我</button>