Vben5 自带封装好的组件（豆包版）
Vben 封装的组件覆盖了从基础 UI 到业务场景（表单、表格、弹窗等）的核心需求，提供了基于shadcn-ui的自定义组件，兼顾了灵活性和统一性。基础 UI 优先使用组件。表单、表格等业务组件优先使用框架封装的VbenForm等，自动关联适配后的组件。
·
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 主题样式（颜色、间距、圆角等），增强了基础交互体验。例如按钮集成权限控制、输入框优化清空逻辑，覆盖页面元素展示、操作反馈等基础场景。 |
| 表单框架组件 | @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 到业务场景（表单、表格、弹窗等）的核心需求，提供了基于 shadcn-ui 的自定义组件，兼顾了灵活性和统一性。使用时可根据场景选择：
- 基础 UI 优先使用
@vben-core/shadcn-ui组件。 - 表单、表格等业务组件优先使用框架封装的
VbenForm、VbenVxeGrid等，自动关联适配后的组件。
火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)