🚀 即插即用的 Vue 3 业务组件库,让中后台开发回归简单
Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。每个组件都是独立的 .vue 单文件,不依赖任何外部样式或工具函数,直接复制到你的项目即可使用。它仅依赖 Element Plus,却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点,让组件复用像复制代码一样简单。
✨ 新增
-
• xly-image-cropper(图片裁剪组件)src/components/xly-image-cropper/index.vue
-
• 基于 Cropper.js v1.6.2 封装
-
• 支持自由裁剪和固定比例裁剪(1:1 / 16:9 / 9:16 等)
-
• 工具栏:左旋 / 右旋 / 镜像 / 翻转 / 放大 / 缩小 / 重置
-
• 支持旋转、翻转、缩放、重置等操作方法
-
• 支持获取裁剪结果:Canvas / Base64 / Blob
-
• 底部操作按钮:取消 / 确认裁剪
-
• Props:src / aspect-ratio / toolbar / show-action / auto-crop-area / view-mode / output-type / output-quality 等
-
• Expose:crop() / getCroppedCanvas() / getCroppedBlob() / getCroppedDataURL() / reset() / rotate() / zoom() / scaleX() / scaleY() / replace() / destroy()
-
• Events:ready / cropped / confirm / cancel / destroyed
-
• 文档页面:src/views/data/image-cropper.vue,菜单路径 /data/image-cropper
-
• xly-signature(签名板组件)src/components/xly-signature/index.vue
-
• 基于 Canvas 的手写签名画板,支持鼠标和触摸绘制
-
• 工具栏:画笔粗细选择(1/2/4/6px)、画笔颜色选择(7 种预设色)
-
• 操作:撤销(最多 30 步历史记录)、清空、确认导出
-
• 支持纯画板模式(showToolbar=false),通过 ref 调用 undo() / clear() / getDataUrl() / confirm() 等方法
-
• 支持自定义画布背景色(canvasBgColor)、画笔颜色(penColor)、占位提示、圆角等
-
• 高清渲染(自动适配 devicePixelRatio)、窗口 resize 自适应
-
• 文档页面:/form/signature,含基础用法、自定义颜色、暗色画布、纯画板模式四个示例
-
• xly-info-card(信息卡片组件)src/components/xly-info-card/index.vue
-
• 支持左侧图片(image)、图标(icon)、标题(title)、描述信息列表(description)、状态标签(status)
-
• 默认深色主题(#1e1e2e),支持通过 backgroundColor / textColor / titleColor / descriptionColor / statusBackgroundColor / statusTextColor 完全自定义配色
-
• 状态标签支持 5 种预设类型:default / primary / success / warning / danger
-
• 支持 clickable 悬浮上浮效果和 click 事件
-
• 提供 action 插槽用于右侧自定义操作区
-
• 支持 bordered 边框和 radius 圆角自定义
-
• 文档页面已同步更新:/basic/card 新增基础用法、白色背景、自定义颜色、可点击等示例
-
• xly-barcode(条形码组件)src/components/xly-barcode/index.vue
-
• 基于 JsBarcode 实现,支持 SVG 原生渲染
-
• 支持多种条码格式:CODE39 / CODE128(默认)/ EAN13 / EAN8 / UPC / CODE93 / ITF14 / MSI / POSTNET 等
-
• Props:content(条码内容)/ format(格式)/ width(条宽度)/ height(高度)/ displayValue(显示文本)/ font / fontSize / textAlign / margin / background / lineColor
-
• Expose:getSvgElement() / toSVGString() / downloadSVG() / downloadPNG()
-
• Events:generated / error
-
• 演示页面:src/views/data/barcode.vue,菜单路径 /data/barcode
-
• xly-qrcode(二维码组件)src/components/xly-qrcode/index.vue
-
• 基于 QRCode 实现,Canvas 渲染
-
• Props:content(内容)/ size(尺寸,默认 200px)/ colorDark / colorLight / correctLevel(纠错级别 L/M/Q/H,默认 M)/ logo / logoSize / logoBackgroundColor / logoRadius / margin
-
• 支持中心 Logo 插入,带白色背景和圆角效果
-
• Expose:toDataURL() / toBlob() / download()
-
• Events:generated / error
-
• 类型声明:src/components/xly-qrcode/qrcode.d.ts
-
• 演示页面:src/views/data/qrcode.vue,菜单路径 /data/qrcode
💡 项目初衷
在中后台系统开发中,我们频繁遇到这些问题:
|
痛点
|
现状
|
|
🔧 组件库太重
|
引入一套组件库,需要学习整套 API、主题配置、构建配置,成本太高
|
|
📋 复制粘贴难
|
想从项目 A 复用一个组件到项目 B,发现依赖了各种公共样式、工具函数,拆不出来
|
|
🧩 Element Plus 不够用
|
基础组件有了,但业务组件(如带展开/收起的搜索表单、智能表格)还得自己写
|
|
🔄 重复造轮子
|
每个项目都要重新实现表格选择、日期范围绑定、表单布局...
|
于是,Ease UI 诞生了。
打造一套极致轻量、即拷即用的业务组件,让开发者可以像复制一段代码一样简单地复用组件。
✨ 核心优势
🎯 单文件组件,即拷即用
每个组件都是完全独立的 .vue 单文件,包含:
无需任何配置,直接复制 .vue 文件到你的项目即可使用!
# 只需要这一个文件
src/components/xly-button/index.vue
# 不需要:
❌ 额外的 CSS 文件
❌ 公共样式依赖
❌ 复杂的构建配置
❌ 主题变量文件
🔌 仅依赖 Element Plus
本组件库仅依赖 Element Plus(及其图标库),不引入其他 UI 组件库:
{
"dependencies": {
"element-plus": "^2.13.6",
"@element-plus/icons-vue": "^2.3.2"
}
}
依赖说明:
-
• 🎨 Element Plus - 仅使用其图标组件(@element-plus/icons-vue)
-
• 🚫 无其他 UI 库 - 不依赖 Ant Design Vue、Naive UI、Vuetify 等
-
• 🚫 无样式库 - 不依赖 Tailwind CSS、UnoCSS 等原子类框架
-
• 📝 纯 Vue 3 + SCSS - 所有组件样式独立编写
这意味着:
如果你觉得这个项目还不错或对你有帮助,欢迎到 Gitee 或 GitHub 上点个 Star,这是对作者最好的支持~开源不易,且用且珍惜。
🔗 Gitee:https://gitee.com/yun_hua_admin/ease-ui
🔗 GitHub:https://github.com/Momingyun/ease-ui
🔗 预览地址:https://ease-ui.com