# JYeontu组件仓库

**Repository Path**: zheng_yongtao/jyeontu-component-warehouse

## Basic Information

- **Project Name**: JYeontu组件仓库
- **Description**: 有趣且可能有用的vue组件开发，欢迎体验，欢迎pr，欢迎star。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 137
- **Forks**: 48
- **Created**: 2021-09-25
- **Last Updated**: 2026-03-08

## Categories & Tags

**Categories**: vue-extensions

**Tags**: vue组件, Vue, 组件库, 前端

## README

<h1 align="center">JVueWheel</h1>

<p align="center">
  <strong>一个有趣且实用的 Vue 2 组件库 & 工具集</strong>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@jyeontu/jvuewheel"><img src="https://img.shields.io/npm/v/@jyeontu/jvuewheel.svg" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/@jyeontu/jvuewheel"><img src="https://img.shields.io/npm/dm/@jyeontu/jvuewheel.svg" alt="npm downloads"></a>
  <a href="https://github.com/yongtaozheng/jyeontu-component-warehouse/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@jyeontu/jvuewheel.svg" alt="license"></a>
  <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue version">
</p>

<p align="center">
  <a href="http://jyeontu.xyz/jvuewheel/#/homePage">在线文档</a> ·
  <a href="https://juejin.cn/column/7326801745261330482">实现说明</a> ·
  <a href="https://gitee.com/zheng_yongtao/jyeontu-component-warehouse">Gitee</a>
</p>

---

## 介绍

**JVueWheel**（`@jyeontu/jvuewheel`）是一个日常开发中积累的 Vue 2 组件库与 JavaScript 工具集，封装了 **41 个 Vue 组件**、**10 个自定义指令** 和 **3 个工具模块**，涵盖数据展示、表单交互、视觉特效、视频处理等多个场景。

## 特性

- 🧩 **丰富组件** — 41 个开箱即用的 Vue 组件，覆盖常见业务场景
- 🎯 **自定义指令** — 10 个实用指令，如防抖、拖拽、缩放、脱敏等
- 🔧 **工具函数** — 日期处理、数字格式化、字符串转换等常用工具
- 📦 **即装即用** — 通过 npm 安装后全局注册即可使用
- 📖 **在线文档** — 提供完整的在线预览与使用文档

## 快速开始

### 安装

```bash
npm install @jyeontu/jvuewheel -S
```

### 引入

在 `main.js` 中全局引入：

```javascript
import jvuewheel from '@jyeontu/jvuewheel'
import '@jyeontu/jvuewheel/lib/jvuewhell.css'

Vue.use(jvuewheel)
```

引入后即可在项目中直接使用所有组件、指令和工具函数。

## 组件一览

### 📊 数据展示

| 组件 | 说明 |
|------|------|
| `JTable` | 表格组件 |
| `JCalendar` | 日历组件 |
| `JSteps` | 步骤条组件 |
| `JNumRolling` | 数字滚动动画 |
| `JElectronicNumber` | 电子数字显示 |
| `JContributionPanel` | 贡献热力图 |
| `JRadar` | 雷达图 |
| `JWordCloud` | 词云组件 |
| `JFlowChart` | 流程图组件 |
| `JGiteeInfoTag` | Gitee 信息标签 |

### 🖱️ 交互组件

| 组件 | 说明 |
|------|------|
| `JDialog` | 弹窗组件 |
| `JDropDownBox` | 下拉框组件 |
| `JToast` | 消息提示 |
| `JMessageBox` | 消息弹框 |
| `JToolTip` | 文字提示 |
| `JHoverBtn` | 悬浮按钮 |
| `JFloatDiv` | 浮动面板 |
| `JMouseMenu` | 右键菜单 |
| `JTagList` | 标签列表 |
| `JSilder` | 滑块组件 |

### ✏️ 表单与输入

| 组件 | 说明 |
|------|------|
| `JAutoCompleteInput` | 自动补全输入框 |
| `JAutoCalcInput` | 自动计算输入框 |
| `JMention` | @提及组件 |
| `JEmojiPicker` | 表情选择器 |
| `JComment` | 评论组件 |
| `JImgVerify` | 图片验证码 |
| `JAppsLock` | 应用锁组件 |

### 🎨 视觉特效

| 组件 | 说明 |
|------|------|
| `JBarrage` | 弹幕组件 |
| `JBarrageRain` | 弹幕雨效果 |
| `J3DSwipe` | 3D 翻转效果 |
| `JWaterfall` | 瀑布流布局 |
| `JCanvasBroad` | Canvas 画板 |
| `JScratchCard` | 刮刮卡组件 |
| `JWebPet` | 网页宠物 |
| `JDynamicVirtualList` | 动态虚拟滚动列表 |

### 🎬 视频相关

| 组件 | 说明 |
|------|------|
| `JVideoCover` | 视频封面提取 |
| `JVideoSpeed` | 视频倍速控制 |
| `JVideoAdvertisement` | 视频广告组件 |

### 📂 其他

| 组件 | 说明 |
|------|------|
| `JCodeHeightLight` | 代码高亮组件 |
| `JDragUpload` | 拖拽上传 |
| `JPageContent` | 页面内容容器 |

## 自定义指令

| 指令 | 说明 |
|------|------|
| `v-jdebounce` | 防抖指令，防止重复触发 |
| `v-jdrag` | 拖拽指令，使元素可拖动 |
| `v-jzoom` | 缩放指令，支持元素缩放 |
| `v-jrotate` | 旋转指令 |
| `v-jrotate3d` | 3D 旋转指令 |
| `v-jdesensitization` | 数据脱敏指令 |
| `v-jthousand` | 千分位格式化指令 |
| `v-jnumber-to-chinese-words` | 数字转中文大写指令 |
| `v-jignore-pinyin` | 拼音忽略匹配指令 |
| `v-jmention` | @提及指令 |

## 工具函数

### 📅 dateTool — 日期工具

- `isLeap(year)` — 判断闰年
- `getWeek(date)` — 获取星期
- `getMonthDays(year, month)` — 获取月份天数
- 更多日期处理函数...

### 🔢 numsFormat — 数字工具

- `numberToWords(num)` — 数字转英文表示
- 更多数字格式化函数...

### 📝 strTool — 字符串工具

- `_toLittleCamel(str)` — 连字符转小驼峰命名
- `_toBigCamel(str)` — 连字符转大驼峰命名
- 更多字符串处理函数...

## 项目结构

```
JYeontuComponentWarehouse/
├── packages/                  # 组件库源码
│   ├── components/            # Vue 组件（41个）
│   ├── directives/            # 自定义指令（10个）
│   ├── utils/                 # 工具函数（3个模块）
│   ├── pagesTools/            # 页面级工具组件
│   └── index.js               # 入口文件
├── examples/                  # 示例 Demo 应用
│   ├── views/                 # 示例页面
│   ├── router/                # 路由配置
│   ├── config/                # 配置文件
│   └── main.js                # 入口文件
├── lib/                       # 构建产物（UMD/CommonJS）
├── public/                    # 静态资源
├── vue.config.js              # Vue CLI 配置
└── package.json               # 项目依赖
```

## 本地开发

```bash
# 1. 克隆仓库
git clone https://gitee.com/zheng_yongtao/jyeontu-component-warehouse.git

# 2. 进入项目目录
cd jyeontu-component-warehouse/JYeontuComponentWarehouse

# 3. 安装依赖
npm install

# 4. 启动开发服务器
npm run serve

# 5. 构建组件库
npm run lib

# 6. 代码检查
npm run lint
```

## 在线文档

- 📖 **组件文档 & 在线预览**：[http://jyeontu.xyz/jvuewheel/#/homePage](http://jyeontu.xyz/jvuewheel/#/homePage)
- 📝 **组件实现详解**：[https://juejin.cn/column/7326801745261330482](https://juejin.cn/column/7326801745261330482)

## 参与贡献

1. Fork 本仓库
2. 新建 `Feat_xxx` 分支
3. 提交代码
4. 新建 Pull Request

欢迎提交 Issue 和 PR，一起完善这个组件库！

## 开源协议

本项目基于 [MIT](./LICENSE) 协议开源。

## 联系作者

| 平台 | 链接 |
|------|------|
| 个人博客 | [jyeontu.xyz](http://jyeontu.xyz/JYeontuBlog/#/home) |
| CSDN | [Twinkle_sone](https://blog.csdn.net/Twinkle_sone) |
| Gitee | [zheng_yongtao](https://gitee.com/zheng_yongtao) |
| GitHub | [yongtaozheng](https://github.com/yongtaozheng) |
| 掘金 | [JYeontu](https://juejin.cn/user/440244290727294) |
| 微信公众号 | **前端也能这么有趣** |