Vue Directive Toolkit

一款轻量级的 Vue 3 自定义指令集合，提供开发中常用的 DOM 操作指令，支持 TypeScript，支持按需引入。

特性

• 🎯 开箱即用 - 一键注册所有指令
• 🧩 按需引入 - 支持 Tree Shaking，只打包用到的指令
• 📦 TypeScript - 完整的类型定义
• 🔧 灵活配置 - 支持自定义参数和修饰符

安装

npm install vue-directive-toolkit

使用

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import VueDirectiveToolkit from 'vue-directive-toolkit'

const app = createApp(App)
app.use(VueDirectiveToolkit)
app.mount('#app')

按需引入

import { createApp } from 'vue';
import { vFocus, vDebounce } from 'vue-directive-toolkit';
import App from './App.vue';

const app = createApp(App);
app.directive('focus', vFocus);
app.directive('debounce', vDebounce);
app.mount('#app');

指令列表

• v-focus - 自动聚焦指令

<template>
  <input v-focus placeholder="自动聚焦" />
</template>

• v-debounce - 防抖指令

<template>
  <!-- 基础用法：click 事件防抖 300ms -->
  <button v-debounce:click="handleClick">点击</button>
  
  <!-- 自定义延迟：500ms -->
  <button v-debounce:click.500="handleClick">防抖 500ms</button>
  
  <!-- 输入防抖 -->
  <input v-debounce:input.300="handleInput" />
</template>

• v-throttle - 节流指令

<template>
  <!-- 滚动节流 200ms -->
  <div v-throttle:scroll.200="handleScroll" class="scroll-container">
    滚动内容...
  </div>
  
  <!-- 窗口 resize 节流 -->
  <div v-throttle:resize.100="handleResize">自适应布局</div>
</template>

• v-lazy - 图片懒加载指令

<template>
  <img v-lazy="imageUrl" alt="懒加载图片" />
</template>

<script setup>
const imageUrl = 'https://example.com/image.jpg';
</script>

• v-click-outside - 点击元素外触发回调指令

<template>
  <div v-click-outside="closeDropdown" class="dropdown">
    点击外部关闭我
  </div>
</template>

<script setup>
const closeDropdown = () => {
  console.log('点击外部，关闭下拉');
};
</script>