@maxtan/ez-ui

ez-ui 基础组件库

ez-ui 是一个基于 Vue 3 与 Element Plus 的业务扩展组件库，面向中后台场景提供一组开箱可用、可继续定制的基础组件。

它并不是某一个单独组件的封装，而是一套围绕常见业务页面搭建出来的组件集合，目标是减少重复样板代码，统一交互风格，并保留足够的扩展能力。

当前包内主要包含以下能力：

• 表单与配置化表单：EzDynamicForm、EzFormItem、EzDatePicker、EzQueryPanel
• 选择类组件：EzSelect、EzRadio、EzCheckbox
• 表格与数据展示：EzTable、EzFastTable、EzPagination
• 交互与弹层：EzDialog
• 资源与展示：EzIcon、EzImageUpload

适用场景

这套组件更适合以下类型的项目：

• 基于 Element Plus 的中后台管理系统
• 需要快速搭建查询、表格、录入、弹窗等标准业务页面的项目
• 希望在统一视觉和交互规范下继续做业务定制的团队

使用前提

本库基于 element-plus，接入前请确保项目已安装并正确配置以下基础依赖：

• vue
• element-plus

安装

pnpm add @maxtan/ez-ui element-plus

快速使用

全量注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import EzUI from '@maxtan/ez-ui'
import 'element-plus/dist/index.css'
import '@maxtan/ez-ui/dist/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(EzUI)
app.mount('#app')

按需使用

import { EzDialog, EzDynamicForm, EzTable } from '@maxtan/ez-ui'

<template>
  <ez-dialog v-model="visible" title="示例弹窗">
    <span>hello ez-ui</span>
  </ez-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { EzDialog } from '@maxtan/ez-ui'

const visible = ref(true)
</script>

包内容概览

表单类

• EzDynamicForm：配置驱动表单，适合快速搭建录入页
• EzFormItem：独立表单项，适合自定义布局
• EzDatePicker：日期/日期时间/月份范围选择，startDate / endDate 双向拆分
• EzQueryPanel：用于列表页查询区的容器与折叠壳封装

选择类

• EzSelect：带业务扩展能力的选择器
• EzRadio：单选组件封装
• EzCheckbox：多选组件封装

表格与数据展示

• EzTable：通用表格封装
• EzFastTable：偏业务化的快速表格方案
• EzPagination：分页能力封装

交互与资源类

• EzDialog：对话框组件封装
• EzIcon：图标组件与图标集支持
• EzImageUpload：图片上传能力封装

设计原则

• 基于 Element Plus 进行业务增强，而不是完全替代基础生态
• 优先解决中后台常见重复场景，而不是追求过度抽象
• 提供默认能力的同时保留插槽、属性透传和自定义扩展点
• 保持能全量注册，也能按需引入

文档

完整文档、示例和组件说明请查看：

• https://ezui.maxtan.cn