vue3 学习笔记14 -- 自定义指令

vue3 学习笔记14 – 自定义指令

当我们在项目中需要对 DOM 进行直接操作或者监听事件时，自定义指令（Custom Directives）是一个强大的工具。它允许我们在 Vue 组件中声明式地绑定指令，从而实现各种交互行为和视觉效果。本文将介绍如何创建和使用自定义指令

什么是自定义指令？

在 Vue 中，指令是带有 v- 前缀的特殊属性，用于对 DOM 进行直接操作或者添加特定行为。自定义指令允许我们封装对 DOM 的操作逻辑，并在多个组件中重复使用，从而提高代码的可维护性和复用性。

准备工作

首先，确保你已经搭建好了 Vue 3 项目，并使用 Vite 作为构建工具。项目使用 TypeScript 进行开发，这样可以提供更强的类型检查和提示。

创建自定义指令

步骤 1：创建自定义指令文件

在项目中创建一个文件夹来存放自定义指令，比如 directives。

步骤 2：编写自定义指令的代码

• 自动聚焦指令

  focusDirective 自定义指令在组件挂载时和更新时会自动将绑定该指令的元素设置为焦点。

// directives/focus.ts
import { Directive } from 'vue';

const focusDirective: Directive = {
  mounted(el) {
    el.focus();
  },
  updated(el) {
    el.focus();
  },
};

export default focusDirective;

步骤 3：注册自定义指令

• 组件内注册

<template>
  <input v-focus />
</template>

<script setup lang="ts">
import { directive } from 'vue';
import focusDirective from '../directives/focus';

// 注册自定义指令
const useFocus = directive('focus', focusDirective);
</script>

• 全局注册

// main.ts

import { createApp } from 'vue';
import App from './App.vue';
import focusDirective from './directives/focus';

const app = createApp(App);

// 全局注册自定义指令
app.directive('focus', focusDirective);

app.mount('#app');

组件内使用

<template>
  <input v-focus />
</template>

<script setup lang="ts">
// 注意：不再需要导入和注册自定义指令，已经全局注册了
</script>

如果自定义指令过多，则可以单独在directives文件中新建一个index.ts文件，自定义指令的注册逻辑封装在一个模块中

// directives/index.ts

import type { App } from "vue";
import focusDirective from '../directives/focus';
import clickOutsideDirective from '../directives/click-outside';

export function setupDirective(app: App<Element>) {
  // 使 v-hasPerm 在所有组件中都可用
    app.directive('focus', focusDirective);
    app.directive('click-outside', clickOutsideDirective);
}

// main.ts
// main.ts

import { createApp } from 'vue';
import App from './App.vue';
import { setupDirective } from "@/directive";

const app = createApp(App);

// 全局注册 自定义指令(directive)
setupDirective(app);

app.mount('#app');