【Ease UI】2026-04-04组件更新:新增组件xly-dict-select字典选择,xly-dict-tag字典标签组件
·
🚀 即插即用的 Vue 3 业务组件库,让中后台开发回归简单
Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。每个组件都是独立的 .vue 单文件,不依赖任何外部样式或工具函数,直接复制到你的项目即可使用。它仅依赖 Element Plus,却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点,让组件复用像复制代码一样简单。
✨ 新增
- xly-dict-select(字典选择器组件)
src/components/xly-dict-select/index.vue- 基于项目自研
XlySelect组件封装(零第三方依赖),完全复用其多选/折叠标签/valueType 等能力 - 新增
return-fieldprop(默认'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-dict-tag(字典标签组件)
src/components/xly-dict-tag/index.vue- 根据字典类型自动请求并渲染对应 Tag,无需手写 if-else 或维护颜色映射
- 内置模拟字典数据(user_status / approve_status / gender / priority / order_status / role_type 等)
- 支持单选模式(
value传字符串/数字)和多选模式(multiple属性) - 多选值支持逗号拼接字符串和字符串数组两种格式,自动识别
- 默认字段:value →
id,label →labelValue;通过value-field/label-field属性自定义任意字段名 - 字典数据支持 type(Tag 类型)、color(自定义颜色)、icon(前置图标)字段
- 空值不渲染、未匹配值优雅降级显示原始值,保证页面不报错
- 加载中显示脉冲点占位,体验流畅
- 提供完整二开指南:替换
fetchDictList函数即可对接真实接口,支持字段映射和缓存方案
🐛 修复
- xly-select:修复未选中时 placeholder 不显示的问题
- xly-cascader:修复未选中时 placeholder 不显示的问题





💡 项目初衷
在中后台系统开发中,我们频繁遇到这些问题:
| 痛点 | 现状 |
|---|---|
| 🔧 组件库太重 | 引入一套组件库,需要学习整套 API、主题配置、构建配置,成本太高 |
| 📋 复制粘贴难 | 想从项目 A 复用一个组件到项目 B,发现依赖了各种公共样式、工具函数,拆不出来 |
| 🧩 Element Plus 不够用 | 基础组件有了,但业务组件(如带展开/收起的搜索表单、智能表格)还得自己写 |
| 🔄 重复造轮子 | 每个项目都要重新实现表格选择、日期范围绑定、表单布局… |
于是,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
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐

所有评论(0)