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

✨ 新增

• • xly-super-form（快速表单组件）src/components/xly-super-form/

  • • 基于配置驱动的高效表单组件，支持双绑定数据同步

  • • 支持多种组件类型：input / select / datePicker / dateRangePicker / dateTimePicker / dateTimeRangePicker / timePicker / timeRangePicker / cascader / switch / rate / imageUpload / user

  • • 支持双绑定组件（日期范围等），自动绑定 startProp 和 endProp

  • • 内置表单校验：required / email / phone / pattern / validator

  • • 支持栅格布局控制（span 1-24）

  • • 支持标签宽度、必填标记、尺寸控制

  • • 支持远程搜索方法（remoteMethod）

  • • 暴露方法：validate / validateField / resetFields / clearValidate / submit / getFormData

• • useFormFields（表单字段生成器）src/components/xly-super-form/useFormFields.ts

  使用示例

  • • 链式调用风格的表单字段配置工具，简化表单定义

  • • 自动推断中文标签（如 name → "姓名"、"phone" → "手机号"）

  • • 支持四种参数风格：input('name') / input('name', '用户名') / input('name', { required: true }) / input('name', '用户名', { span: 12 })

  • • 日期范围支持四种调用方式，自动生成 startProp / endProp

  • • 链式方法：$required() / $span() / $label() / $noLabel() / $props() / $rule()`input`、`textarea`、`password`和`rules`。这些函数可能用于创建不同类型的表单字段，例如输入框、文本区域和密码框。 3. **定义表单字段数组**： ```javascript const fields = [ input('name', '姓名', { required: true }), input('phone', '手机号', { rules: rules.phone() }), input('email', '邮箱', { rules: rules.email() }), textarea('remark', '备注', { props: { rows: 3 } }), password('password', '密码'), ]; ``` 这行代码定义了一个名为`fields`的数组，其中包含了五个表单字段。每个字段都是一个函数调用，使用`input`、`textarea`或`password`函数创建： - 第一个字段是`input`类型，用于输入姓名，标记为必填（`required: true`）。 - 第二个字段是`input`类型，用于输入手机号，并应用了`rules.phone()`规则。 - 第三个字段是`input`类型，用于

    输入邮箱，并应用了rules.email()规则。

    • 第四个字段是textarea类型，用于输入备注，并设置了rows属性为3。

    • 第五个字段是password类型，用于输入密码。

    1. 总结：这段代码通过使用useFormFields钩子，创建了一个包含多个表单字段的数组。每个字段都有特定的类型和属性，如必填、规则和样式等。这些字段将被用于构建一个表单，用户可以在其中输入数据。

    / $options() / $dict() / $remote() / $range()

  • • 内置校验规则工厂：rules.required() / rules.email() / rules.phone() / rules.pattern() / rules.custom()

  • • 工具函数：pick() 数据提取 / divider() 分隔线 / title() 标题

FormFields`模块中导入了`useFormFields`钩子。这个钩子可能是一个自定义的React钩子，用于简化表单字段的创建和管理。

2. **解构赋值**：
   ```javascript
   const { input, textarea, password, rules } = useFormFields();
   ```
   这行代码使用解构赋值从`useFormFields`钩子中提取了四个函数：
    
    
    import { useFormFields } from '@/components/xly-super-form/useFormFields'

const { input, textarea, password, rules } = useFormFields()

const fields = [
  input('name', '姓名', { required: true }),
  input('phone', '手机号', { rules: rules.phone() }),
  input('email', '邮箱', { rules: rules.email() }),
  textarea('remark', '备注', { props: { rows: 3 } }),
  password('password', '密码'),
]

🐛 修复

• • search-form搜索表单：修复重置事件触发顺序问题

  • • 调整 reset 事件在 modelValue 更新后的触发顺序

  • • 确保表单重置时数据同步的一致性

• select下拉框：修复下拉框单项模式添加选项失败的问题

💡 项目初衷

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

于是，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，这是对作者最好的支持～开源不易，且用且珍惜。

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