ts vue3 自定义指令

当然，以下是将前面两个步骤汇总到一起的完整实现方案：

1. 定义指令

首先，在 src/directives 文件夹中创建你的自定义指令文件。例如，v-focus.ts 和 v-color.ts：

v-focus.ts：

import { Directive } from 'vue';

const vFocus: Directive = {
  mounted(el) {
    el.focus();
  }
};

export default vFocus;

v-color.ts：

import { Directive } from 'vue';

const vColor: Directive = {
  mounted(el, binding) {
    el.style.color = binding.value;
  }
};

export default vColor;

2. 自动注册指令

在 src/directives 文件夹中创建一个 index.ts 文件，并在其中添加自动注册逻辑：

index.ts：

import { App } from 'vue';

export function registerDirectives(app: App) {
  const requireDirective = require.context('./', false, /\.ts$/);

  requireDirective.keys().forEach(fileName => {
    if (fileName === './index.ts') return; // 忽略 index.ts 文件

    const directiveName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1'); // 提取指令名称
    const directive = requireDirective(fileName).default;
    app.directive(directiveName, directive);
  });
}

3. 主入口文件

在 src/main.ts 文件中导入并调用 registerDirectives 方法来完成指令的自动注册：

main.ts：

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

const app = createApp(App);

registerDirectives(app);

app.mount('#app');

总结

1. 定义指令：在 src/directives 文件夹中创建自定义指令文件，每个文件导出一个指令对象。

2. 自动注册指令：在 src/directives/index.ts 文件中创建一个 registerDirectives 函数，该函数使用 require.context 方法动态导入 directives 文件夹中的所有指令文件，并注册每个指令。

3. 主入口文件：在 src/main.ts 文件中导入 registerDirectives 函数，并调用它来注册所有指令。

通过这种方式，你的 Vue 应用程序将自动注册 directives 文件夹中的所有指令，保持代码的模块化和整洁。

其他