directix

Vue 2/3 自定义指令库

[GitHub] [文档]

简介

directix 是一个全面、易用、高性能的 Vue 自定义指令库，同时支持 Vue 2 和 Vue 3。提供了丰富的开箱即用指令，帮助开发者快速实现常见的 UI 交互效果。

特性

• ✨ 双版本支持 - 同时支持 Vue 2 和 Vue 3
• 📦 开箱即用 - 丰富的内置指令
• 🎯 按需引入 - 支持 Tree Shaking
• 📝 完整文档 - 详细的 API 文档和示例

内置指令

指令	描述
v-click-outside	点击外部元素触发
v-copy	复制文本到剪贴板
v-debounce	防抖指令
v-throttle	节流指令
v-lazy	图片懒加载
v-longpress	长按事件
v-ripple	水波纹效果
v-tooltip	提示框

安装

# npm
npm install directix

# yarn
yarn add directix

# pnpm
pnpm add directix

使用示例

// 全局注册
import { createApp } from 'vue'
import Directix from 'directix'

const app = createApp(App)
app.use(Directix)

// 按需引入
import { vDebounce, vCopy } from 'directix'

<template>
  <button v-debounce="handleClick" v-copy="text">
    点击复制
  </button>
</template>

统计

• ⭐ Stars: 1
• 📦 主要语言: TypeScript