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

摘要

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

背景

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

目的

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

对比

传统方式

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

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

自定义指令方式

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

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

自定义指令全流程

定义自定义指令

typescript 复制代码
// 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

项目注册自定义指令

typescript 复制代码
// 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类型。

typescript 复制代码
// src/directives.d.ts
import { vToggleType } from 'src/directive/v-toggle'

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

export {}

结论

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

相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程