重生之用AI敲个npm vue3自定义指令集合包

fubobo
0 阅读3分钟

Vue3 Directives Kit：一个功能丰富的 Vue 3 自定义指令库

🎯 项目简介

vue3-directives-kit 是一个专为 Vue 3 设计的自定义指令库，提供了一系列实用的指令功能，帮助开发者快速实现常见的交互需求。

GitHub: gitee.com/Gitfubobo/v…
NPM: npm install vue3-directives-kit

TS类型提示友好，ctrl+点击 能够跳转哦，没错，文章也是AI生成的，用起来没毛病

image.png

✨ 核心功能

1. 📋 v-copy - 一键复制

轻松实现文本复制功能，支持复制成功/失败回调。

<button v-copy="'要复制的文本'">复制文本</button>
<button v-copy="{ text: '复杂文本', onSuccess: () => alert('复制成功！') }">
    带回调的复制
</button>

2. 💡 v-tooltip - 智能提示

美观的工具提示，支持多种定位和 HTML 内容。

<button v-tooltip="'简单提示'">悬停查看</button>
<button v-tooltip="{ content: '自定义提示', placement: 'top' }">
    顶部提示
</button>

3. 🔒 v-watermark - 水印保护

为页面添加水印，保护内容安全。

<div v-watermark="{ text: '内部文档', fontSize: 16 }">
    受保护的内容区域
</div>

4. 🔢 v-format-number - 数字格式化

智能数字输入和格式化，支持千位分隔符和小数位限制。

<!-- 金额输入（两位小数，千位分隔符） -->
<input v-format-number="{ decimalPlaces: 2, thousandSeparator: true }" />

<!-- 百分比输入（三位小数） -->
<input v-format-number="{ decimalPlaces: 3, prefix: '%' }" />

5. ⏎ v-enter - Enter 键监听

简化 Enter 键事件处理。

<!-- 登录表单 -->
<input v-enter="handleLogin" placeholder="按 Enter 登录" />

<!-- 搜索框 -->
<input v-enter="handleSearch" placeholder="输入关键词后按 Enter 搜索" />

6. ⎋ v-esc - Escape 键监听

便捷的 Escape 键事件处理。

<!-- 模态框关闭 -->
<div v-esc="closeModal" class="modal">
    <button @click="closeModal">×</button>
    模态框内容
</div>

<!-- 取消搜索 -->
<input v-esc="clearSearch" placeholder="按 ESC 取消搜索" />

7. 📥 v-download - 文件下载

轻松实现文件下载功能。

<!-- 下载文本文件 -->
<button v-download="{ data: '文件内容', filename: 'demo.txt' }">
    下载文本文件
</button>

<!-- 下载 JSON 数据 -->
<button v-download="{ 
    data: JSON.stringify({ name: '示例', value: 123 }), 
    filename: 'data.json',
    mimeType: 'application/json'
}">
    下载 JSON 文件
</button>

🚀 快速上手

安装

npm install vue3-directives-kit

全局使用

import { createApp } from 'vue';
import VueDirectivesKit from 'vue3-directives-kit';
import 'vue-directives-kit/dist/vue-directives-kit.css'; // 这一块还是手动引入下，直接嵌入不雅观 

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

按需引入

import { copy, tooltip, formatNumber } from 'vue3-directives-kit';

const app = createApp(App);
app.directive('copy', copy);
app.directive('tooltip', tooltip);
app.directive('formatNumber', formatNumber);

💡 技术特色

  • 完整的 TypeScript 支持 - 提供完整的类型定义和智能提示
  • Vue 3 原生支持 - 基于 Composition API 开发
  • 轻量级 - 按需引入，不增加不必要的包体积
  • 易扩展 - 清晰的代码结构，便于自定义扩展

🎯 适用场景

  • 企业级管理系统
  • 数据展示和操作界面
  • 表单处理和验证
  • 用户交互增强
  • 内容保护和安全

📈 性能优势

  • 指令实现经过优化，性能开销小
  • 支持 Tree Shaking，按需引入
  • 内存管理完善，避免内存泄漏

🔧 开发体验

  • 完整的文档和示例
  • 详细的错误提示
  • 支持 VSCode 智能跳转
  • 响应式设计适配

🌟 总结

vue3-directives-kit 提供了 7 个实用的 Vue 3 自定义指令，涵盖了常见的交互需求。无论是简单的复制功能，还是复杂的数字格式化，都能轻松实现。

立即体验:

npm install vue3-directives-kit

欢迎 Star 和贡献！🚀

avatar
文章
阅读
粉丝