网站 测速度wordpress是不是一定要买服务器
Vben5 封装的组件可分为 基础 UI 组件、表单相关组件、布局与功能组件 等类别,具体如下:
| 组件类别 | 所属包 | 核心组件列表 | 详细说明 |
|---|---|---|---|
| 基础 UI 组件 | @vben-core/shadcn-ui | 按钮类:VbenButton(基础按钮)、VbenButtonGroup(按钮组)、VbenIconButton(图标按钮)、VbenCheckButtonGroup(选择按钮组)输入类: VbenInput(输入框)、VbenInputPassword(密码输入框)、VbenPinInput(验证码输入框)选择类: VbenSelect(下拉选择器)、VbenCheckbox(复选框)、VbenSegmented(分段器)反馈类: VbenTooltip(提示框)、VbenHelpTooltip(帮助提示)、VbenPopover(气泡卡片)、VbenSpinner(加载动画)、VbenLoading(加载状态)其他: VbenAvatar(头像)、VbenBackTop(回到顶部)、VbenBreadcrumb(面包屑)、VbenContextMenu(右键菜单)、VbenDropdownMenu(下拉菜单)、VbenIcon(图标)、VbenScrollbar(滚动条)、VbenTree(树形组件)、VbenRenderContent(内容渲染) | 基于 shadcn-ui 封装的核心组件,统一适配 Vben 主题样式(颜色、间距、圆角等),增强了基础交互体验。例如按钮集成权限控制、输入框优化清空逻辑,覆盖页面元素展示、操作反馈等基础场景。 |
| 表单相关组件(适配层) | adapter/component | 输入类:Input(输入框)、InputNumber(数字输入)、InputPassword(密码输入)、Textarea(文本域)、AutoComplete(自动完成)、Mentions(提及)选择类: Select(下拉选择)、TreeSelect(树形选择)、ApiSelect(接口联动选择)、ApiTreeSelect(接口联动树形选择)、Checkbox(复选框)、CheckboxGroup(复选框组)、Radio(单选框)、RadioGroup(单选框组)、Switch(开关)、Rate(评分)日期时间类: DatePicker(日期选择)、RangePicker(日期范围选择)、TimePicker(时间选择)其他: Upload(上传)、Divider(分割线)、Space(间距)、IconPicker(图标选择器)、DefaultButton(默认按钮)、PrimaryButton(主要按钮) | 对 ant-design-vue 组件进行适配封装,增加默认占位符、国际化支持等特性,确保与 Vben 整体风格一致。例如输入框预设校验规则、选择器支持接口联动,为表单开发提供基础输入组件。 |
| 表单框架组件 | @vben-core/form-ui | VbenForm(表单框架)、useVbenForm(表单状态管理 hooks)、setupVbenForm(表单初始化配置) | 基于适配层组件构建的表单框架,核心优势是支持 schema 配置化开发,无需编写大量 JSX。通过 useVbenForm 可快速实现表单数据联动、校验、重置等逻辑,大幅提升复杂表单开发效率。 |
| 弹窗与抽屉组件 | @vben-core/popup-ui | VbenModal(模态框组件)、useVbenModal(模态框状态管理)、VbenDrawer(抽屉组件)、useVbenDrawer(抽屉状态管理) | 封装了模态框和抽屉的基础功能,新增拖拽、全屏、关闭前确认等增强特性。通过专属 hooks 可在组件外部轻松控制弹窗显示/隐藏、传递数据,适合需要跨组件交互的场景。 |
| 表格组件 | @vben/plugins/vxe-table | VbenVxeGrid(封装的表格组件)、useVbenVxeGrid(表格状态管理)、CellImage(图片渲染)、CellLink(链接渲染) | 基于 vxe-table 封装,内置分页、排序、筛选、列宽调整等功能,支持通过配置项快速实现复杂表格逻辑。提供多种单元格自定义渲染组件,适配图片、链接等特殊数据展示场景。 |
| 布局组件 | @vben-core/layout-ui | VbenAdminLayout(管理系统布局组件) | 预定义管理系统的完整布局结构,包含头部导航、侧边栏菜单、内容区、面包屑等模块,支持响应式适配,可直接用于后台系统页面框架搭建,减少布局重复开发。 |
| 其他功能组件 | - | CountTo/VbenCountToAnimator(数字滚动动画组件)、EllipsisText(文本省略组件)、JsonViewer(JSON 数据可视化组件)、Page/ColPage(分页相关组件)、Resize(尺寸监听组件)、Tippy(增强型提示组件) | 提供各类辅助功能组件,解决常见业务场景需求。例如数字滚动动画用于数据统计展示,文本省略组件处理长文本显示,JSON 可视化便于调试接口返回数据,提升页面交互丰富度。 |
总结
Vben 封装的组件覆盖了从基础 UI 到业务场景(表单、表格、弹窗等)的核心需求,且通过 adapter 层适配了 ant-design-vue 组件,同时提供了基于 shadcn-ui 的自定义组件,兼顾了灵活性和统一性。使用时可根据场景选择:
- 基础 UI 优先使用
@vben-core/shadcn-ui组件。 - 表单、表格等业务组件优先使用框架封装的
VbenForm、VbenVxeGrid等,自动关联适配后的组件。
