🚀 即插即用的 Vue 3 业务组件库，让中后台开发回归简单
Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。每个组件都是独立的 .vue 单文件，不依赖任何外部样式或工具函数，直接复制到你的项目即可使用。它仅依赖 Element Plus，却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点，让组件复用像复制代码一样简单。

✨ 新增

• • xly-dict-select（字典选择器组件）src/components/xly-dict-select/index.vue

  • • 基于项目自研 XlySelect 组件封装（零第三方依赖），完全复用其多选/折叠标签/valueType 等能力

  • • 新增 return-field prop（默认 'id'）：控制 v-model 最终返回值字段，可设为 'labelValue' 返回英文代码

  • • 支持单选（string）和多选（string[] 或逗号字符串），通过 multiple 切换

  • • 多选输出格式通过 value-format="array"*"string" 控制

  • • 支持传入逗号拼接字符串，组件自动拆分回显

  • • 默认字段 id/labelValue，通过 value-field/label-field 自定义字段名

  • • 选项前显示颜色圆点（对应 type/color 字段），可通过 :show-dot="false" 关闭

  • • @change 事件同时返回完整字典项对象，方便获取额外信息

  • • expose 暴露 reload() 方法，支持手动重新加载字典

  • • 内置完整二开指南，替换 fetchDictList 函数即可对接真实接口，支持全局缓存方案

✨ 新增

• • xly-dept-tree（部门树组件）src/components/xly-dept-tree/

  • • 用于展示组织架构、部门层级等树形结构数据

  • • 支持树形数据和带 pid 的扁平数据两种格式，自动构建树结构

  • • 内置展开/折叠、节点选中、高亮等功能

  • • 支持 default-expand-level 控制默认展开层级，设为 0 全部展开

  • • 支持 selected-id 外部控制选中节点，@select 事件获取选中数据

  • • 支持 node-key 自定义字段映射（id/pid/label/children）

  • • 支持 light / dark 两种主题切换

  • • 零第三方依赖，基于 Vue 3 递归组件实现

  • • xly-json-viewer（JSON 查看器组件）src/components/xly-json-viewer/index.vue

    • • 用于美化和展示 JSON 数据，内置语法高亮、折叠/展开、复制等功能

    • • 基于 Vue 3 递归渲染实现，零第三方依赖

    • • 支持对象、数组、字符串、数字、布尔值、null 等数据类型

    • • depth 属性控制默认展开深度，设为 0 表示全部展开

    • • max-height 属性限制最大高度，超出显示滚动条

    • • 支持 light / dark 两种主题切换

    • • 工具栏按钮已用 🔌 注释标注，二开时可直接删除对应行

🐛 修复

• • xly-input：修复输入框失去焦点输入内容被清空的问题

💡 项目初衷

在中后台系统开发中，我们频繁遇到这些问题：

于是，Ease UI 诞生了。

打造一套极致轻量、即拷即用的业务组件，让开发者可以像复制一段代码一样简单地复用组件。

✨ 核心优势

🎯 单文件组件，即拷即用

每个组件都是完全独立的 .vue 单文件，包含：

• • ✅ 完整的 <template> 模板

• • ✅ 独立的 <script setup> 逻辑

• • ✅ 自包含的 <style scoped> 样式

无需任何配置，直接复制 .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 - 所有组件样式独立编写

这意味着：

• • 如果你的项目已经使用 Element Plus，可以无缝集成

• • 如果你的项目没有 Element Plus，只需安装它即可

• • 不会有多个 UI 库的样式冲突问题

如果你觉得这个项目还不错或对你有帮助，欢迎到 Gitee 或 GitHub 上点个 Star，这是对作者最好的支持～开源不易，且用且珍惜。

也欢迎关注公众号【Ease UI开源】，不错过最新的更新动态。

🔗 Gitee：https://gitee.com/yun_hua_admin/ease-ui
🔗 GitHub：https://github.com/Momingyun/ease-ui
🔗 预览地址：http://1.14.65.79