输入自定义指令

Question

我想问一个关于Vue自定义指令的问题。作为 Typescript 的粉丝，我想在类型支持的情况下使用此功能，但我在网络和聊天中都找不到任何解决方案。

<button v-clickOutside="myFunc"> Click Outside </button>

当我像这样编写代码并向 Vue 添加 clickOutside 指令时，它可以正常工作。然而clickOutside没有类型支持，没有自动完成支持，并且它被识别为any。

为了定义，我遵循了 Vue 的文档。

app.directive('clickOutside', (el, binding) => {
  // My code is here.
})

Answer 1

Directive<T,V>尽管记录很少，但使用该类型是可能的。

import { Directive } from 'vue'

该类型采用两个类型参数，一个用于元素类型T，一个用于绑定值V。像这样使用它：

app.directive('clickOutside', <Directive<HTMLElement,string>>{
  mounted (el, { value }) {
    // el:  HTMLElement
    // value: string
  }
})