Directix Playground

交互式配置指令并生成 Vue 2、Vue 3、组合式函数和 Nuxt 代码。

🎯 Code Generator v-debounce

Debounce function execution

v-click-outside v-debounce v-throttle v-long-press v-hover v-hotkey v-click-delay v-click-wave v-context-menu v-copy v-lazy v-intersect v-visible v-loading v-blur v-skeleton v-scroll v-infinite-scroll v-sticky v-parallax v-progress v-ripple v-truncate v-ellipsis v-uppercase v-lowercase v-capitalcase v-number v-money v-trim v-tooltip v-draggable v-image-preview v-countdown v-watermark v-print v-focus v-mask v-permission v-sanitize v-resize v-mutation v-virtual-list v-touch v-swipe v-pan v-pinch v-rotate-gesture v-pull-refresh v-fade v-typewriter v-counter v-lottie v-export v-highlight v-fullscreen v-emoji

Vue

<template>
  <div v-debounce="{
    handler: 'handleInput',
    wait: 300,
    leading: false,
    trailing: true
  }">
    <!-- Debounce function execution -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Directive options
const options = {
  handler: 'handleInput',
    wait: 300,
    leading: false,
    trailing: true
}
</script>

Event · debounce View API Docs →

快速开始

1. 选择指令 - 从 57+ 指令中选择，按类别组织
2. 选择 Vue 版本 - 切换 Vue 2 或 Vue 3
3. 选择输出格式 - 指令语法或组合式函数
4. 复制代码 - 点击复制并粘贴到您的项目中

功能特性

• 57+ 指令 - 覆盖所有 Directix 指令
• 41+ 组合式函数 - 每个指令对应的组合式 API
• Vue 2 & Vue 3 - 生成任意版本代码
• TypeScript 支持 - 完整类型定义
• 15 个分类 - 按使用场景组织

分类

分类	描述	指令
事件	事件处理	v-click-outside, v-debounce, v-throttle, v-long-press, v-hover, v-hotkey, v-click-delay, v-click-wave, v-context-menu, v-copy
可见性	可见性控制	v-lazy, v-intersect, v-visible, v-loading, v-blur, v-skeleton
滚动	滚动行为	v-scroll, v-infinite-scroll, v-sticky, v-parallax, v-progress
交互	用户交互	v-ripple
格式化	文本格式化	v-uppercase, v-lowercase, v-capitalcase, v-number, v-money, v-truncate, v-ellipsis, v-trim
UI	UI 增强	v-tooltip, v-draggable, v-image-preview, v-countdown, v-watermark, v-print
表单	表单处理	v-focus, v-mask
安全	安全功能	v-permission, v-sanitize
观察者	DOM 观察	v-resize, v-mutation
性能	性能优化	v-virtual-list
移动端	触摸手势	v-touch, v-swipe, v-pan, v-pinch, v-rotate-gesture, v-pull-refresh
动画	动画效果	v-fade, v-typewriter, v-counter, v-lottie
数据	数据处理	v-export, v-highlight
媒体	媒体控制	v-fullscreen
输入	输入处理	v-emoji

使用示例

<template>
  <!-- 在此使用生成的指令代码 -->
  <input v-debounce="{ handler: handleSearch, wait: 300 }" />
</template>

<script setup>
import { ref } from 'vue'

const searchText = ref('')

function handleSearch(event) {
  console.log('搜索:', event.target.value)
}
</script>

v2.5.0 功能

• 🖥️ 浏览器扩展 DevTools 面板 - 全功能 DevTools UI，包含 Directives、Performance、Issues、Export 四个标签页
• 🔍 实时指令监控 - MutationObserver 自动检测 DOM 变化
• 📊 性能图表 - 可视化柱状图显示挂载/更新/卸载时间
• 📤 诊断报告导出 - JSON、CSV、HTML 导出格式
• ⚡ VS Code 瓶颈检测 - 性能瓶颈警告，附带优化建议
• 🔎 MiniSearch 优化 - 增强本地搜索，标题加权、模糊匹配
• ▶️ 一键运行按钮 - Playground 现有"运行"按钮打开生成的代码

v2.4.0 功能

• 🛠️ VS Code 扩展增强 - DirectiveCompletionProvider、悬浮文档、配置编辑器、代码片段
• 🐛 调试工具 - DiagnosticsProvider、PerformanceAnalyzer、StateInspector
• 📚 交互式示例 - Lazy、Permission、Long Press、Context Menu、Watermark 示例
• 📖 最佳实践指南 - 指令选择、性能、SSR、安全指南

v2.3.0 功能

• 🌍 5 种新语言 - 韩语、法语、德语、西班牙语、俄语翻译
• 🔧 Locale 工具 - LocaleDetector、LocaleLoader 动态加载

v2.2.0 功能

• ⚡ 性能优化 - 事件委托、批量处理、内存泄漏检测
• 📦 体积优化 - 单指令 ≤ 1KB gzip

v2.1.0 功能

• 🧩 增强 Web Components - Shadow DOM 样式、生命周期钩子、插槽投射
• 🖥️ SSR 支持 - 声明式 Shadow DOM、hydrateCustomElements、createSSRSafeCustomElement
• 🔌 新 API - isCustomElementDefined、whenCustomElementDefined、getRegisteredCustomElements
• 🎯 扩展选项 - styles、observedAttributes、自定义元素生命周期钩子

v2.0.0 功能

• 🧩 Web Components 支持 - 在自定义元素中使用指令
• ⚡ Vue 3 条件优化 - markRaw、shallowReactive 增强
• 🔄 完全 Vue 2 兼容 - 持续支持 Vue 2.x

需要帮助？

• 文档 - 完整文档
• API 参考 - 完整 API 参考
• 示例 - 实际示例
• GitHub - 源代码