如何编写智能提示的vue自定义指令

摘要

本文将简单介绍一个vue的自定义指令的开发流程，引入本文关键"全局注册自定义指令 "，并提供自动补充 ，类型提示。

背景

当前版本有需要通过平台控制项目功能开关的需求,为了提高维护效率以及后期开发的效率，我首先想到了用vue自定义指令来做这件事情，但是开发的全局指令没有提示很头痛，想做到v-show这种指令有提示，于是探索得到了这些收获，大概想达到的效果就是如下gif。

目的

通过使用开发的自定义脚本，提高开发效率，开发体验，减少维护成本。通过自动补全维护单一数据源，避免key写错。

对比

传统方式

通过v-if或者v-show加上一个ref变量来控制组件的显示隐藏，这种方法效率太低，代码太杂乱。

<template>
    <button v-if="show">这是一个可能显示隐藏的开关</button>
</template>
<script setup lang="ts">
const show=ref(false)
onMounted(()=>{
    show.value=fetch()
})
<script/>

自定义指令方式

通过全局定义的自定义指令，配合ide和typescript的自动补全，开发效率🚀。

<button v-toggle="toggleKey">这是一个可能显示隐藏的开关</button>

自定义指令全流程

定义自定义指令

// src/directives/vToggle.ts
import { Directive, Plugin } from "vue";

type ToggleKey = '_test_switch' | 'ceshi '
export type vToggleType = Directive<HTMLElement, ToggleKey>
const VTogglePlugin: Plugin = {
  install(app) {
    const directive: vToggleType = {
      mounted: (el, binding) => {
        const key = binding.value;
        const isShow = fetch(key) //这部分自行发挥，可以外层包裹map来查询。
        if (isShow) {
          return
        } {
          const parentEl = el.parentElement
          parentEl?.removeChild(el)
        }
      }
    }
    app.directive('toggle', directive);
  }
}
export default VTogglePlugin

项目注册自定义指令

// src/main.ts
import { createApp } from "vue"
import App from "./App.vue"
import { router } from "./routes"
import VToggle from "src/directive/v-toggle"

const app = createApp(App)
app.use(router)
app.use(VToggle)
app.mount("#app")

ts类型注册 重要‼️

在src下写一个d.ts文件来申明vue模块中的ComponentCustomProperties存在一个属性名为vToggle的属性，并且为它标注上ts类型。

// src/directives.d.ts
import { vToggleType } from 'src/directive/v-toggle'

declare module 'vue' {
  export interface ComponentCustomProperties {
    vToggle: vToggleType
  }
}

export {}

结论

本文简单介绍了一个vue自定义指令的开发，主要是想科普如何让一个自定义指令获得typescript的支持和ide的自动补全。不仅仅自定义指令可以，全局组件也是类似的操作。