如何在vue中注册全局指令

[WhisperCode]

当我们需要用到很多的自定义指令的时候，而且还用到了ts，如何在main.ts中注册全局指令？

[chenxch]

custom-directives
vue-ts-directive-demo

Write directly in 'main. ts'

const app = createApp(App);
app.directive('color', (el: HTMLElement, binding: DirectiveBinding) => {
  el.style.color = binding.value;
});

Import to 'main. ts' for registration

import Bold from './directive/bold';

const app = createApp(App);
app.directive('bold', Bold);

If there are many instructions, you can write a batch registration function.

[DemoPan]

是通过 app.directive('bold', Bold) 一层层点下来的是吧？

[chenxch]

是通过 app.directive('bold', Bold) 一层层点下来的是吧？

是哈，我实在记不住的时候就这么操作了哈

[WhisperCode]

custom-directives vue-ts-directive-demo

Write directly in 'main. ts'

const app = createApp(App);
app.directive('color', (el: HTMLElement, binding: DirectiveBinding) => {
  el.style.color = binding.value;
});

Import to 'main. ts' for registration

import Bold from './directive/bold';

const app = createApp(App);
app.directive('bold', Bold);

If there are many instructions, you can write a batch registration function.

如果是多个呢？怎么全局注册？

[chenxch]

首先你需要把多个指令整合成数组或者对象，然后批量注册，例如

const directiveMap = {
  bold: Bold,
  size: Size,
};

function installDirectives(app: App, directives: Record<string, Directive>) {
  Object.entries(directives).forEach(([key, dire]) => {
    app.directive(key, dire);
  });
}

installDirectives(app, directiveMap);

[chenxch]

@WhisperCode 看看是否还有相关其他问题哈，如果没有的话可以标记为答案哦~

[liulinboyi]

正如 @chenxch 的回答 #7298 (comment) ，文档 https://cn.vuejs.org/api/application.html#app-directive 中也有提到。

As mentioned in @chenxch's answer #7298 (comment) and in the documentation https://cn.vuejs.org/api/application.html#app-directive

[WhisperCode]

谢谢你啦