# wot-design-uni 组件清单 本文档列出了 wot-design-uni 组件库中所有可用的组件及其简介。 > 文档生成时间: 2025-11-17 > 组件总数: 78 --- ## 1. ActionSheet 动作面板 从底部弹出的动作菜单面板。 **文档路径**: `doc/wot-design-uni/docs/component/action-sheet.md` ## 2. Backtop 回到顶部 用于返回页面顶部的操作按钮。 **文档路径**: `doc/wot-design-uni/docs/component/backtop.md` ## 3. Badge 徽标 出现在按钮、图标旁的数字或状态标记。 **文档路径**: `doc/wot-design-uni/docs/component/badge.md` ## 4. Button 按钮 按钮用于触发一个操作，如提交表单或打开链接。 **文档路径**: `doc/wot-design-uni/docs/component/button.md` ## 5. CalendarView 日历面板组件 提供日历单选、多选、范围选择、周维度、月维度等功能。可以根据实际业务场景基于该组件进行封装高度定制化组件。 **文档路径**: `doc/wot-design-uni/docs/component/calendar-view.md` ## 6. Calendar 日历选择器 提供日历单选、多选、范围选择、周维度、月维度等功能。 **文档路径**: `doc/wot-design-uni/docs/component/calendar.md` ## 7. Card 卡片 用于展示商品的图片、价格等信息。 **文档路径**: `doc/wot-design-uni/docs/component/card.md` ## 8. Cell 单元格 单元格为列表中的单个展示项。 **文档路径**: `doc/wot-design-uni/docs/component/cell.md` ## 9. Checkbox 复选框 复选框用于在一组备选项中进行多选。 **文档路径**: `doc/wot-design-uni/docs/component/checkbox.md` ## 10. Circle 环形进度条 圆环形的进度条组件，支持进度渐变动画。 **文档路径**: `doc/wot-design-uni/docs/component/circle.md` ## 11. ColPicker 多列选择器 使用多列选择器来做级联，交互效果较好，多列选择器支持无限级选择。 **文档路径**: `doc/wot-design-uni/docs/component/col-picker.md` ## 12. Collapse 折叠面板 将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。 **文档路径**: `doc/wot-design-uni/docs/component/collapse.md` ## 13. ConfigProvider 全局配置 用于全局配置 Wot 组件，提供深色模式、主题定制等能力。 **文档路径**: `doc/wot-design-uni/docs/component/config-provider.md` ## 14. CountDown 倒计时 用于实时展示倒计时数值，支持毫秒精度。 **文档路径**: `doc/wot-design-uni/docs/component/count-down.md` ## 15. CountTo 数字滚动 数字滚动组件。 **文档路径**: `doc/wot-design-uni/docs/component/count-to.md` ## 16. Curtain 幕帘 一般用于公告类的图片弹窗。 **文档路径**: `doc/wot-design-uni/docs/component/curtain.md` ## 17. DatetimePicker 日期时间选择器 为 DatetimePickerView 组件的封装，在其内部构建好日期时间选项。 **文档路径**: `doc/wot-design-uni/docs/component/datetime-picker.md` ## 18. DatetimePickerView 日期时间选择器视图 为 Picker 组件的封装，在其内部构建好日期时间选项。 **文档路径**: `doc/wot-design-uni/docs/component/datetime-picker-view.md` ## 19. Divider 分割线 用于将内容分隔为多个区域。 **文档路径**: `doc/wot-design-uni/docs/component/divider.md` ## 20. DropMenu 下拉菜单 向下或向上弹出的菜单列表。 **文档路径**: `doc/wot-design-uni/docs/component/drop-menu.md` ## 21. Fab 悬浮按钮 悬浮动作按钮组件，按下可显示一组动作按钮。 **文档路径**: `doc/wot-design-uni/docs/component/fab.md` ## 22. FloatingPanel 浮动面板 浮动在页面底部的面板，用户可以通过上下拖动面板来浏览内容，常用于地图导航。 **文档路径**: `doc/wot-design-uni/docs/component/floating-panel.md` ## 23. Form 表单 用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型。 **文档路径**: `doc/wot-design-uni/docs/component/form.md` ## 24. Gap 间隔槽 一般用于页面布局时代替margin或者padding;或者充当（底部）占位元素。 **文档路径**: `doc/wot-design-uni/docs/component/gap.md` ## 25. Grid 宫格 宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。 **文档路径**: `doc/wot-design-uni/docs/component/grid.md` ## 26. Icon 图标 基于字体的图标集。 **文档路径**: `doc/wot-design-uni/docs/component/icon.md` ## 27. Img 图片 增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载完成、加载失败。 **文档路径**: `doc/wot-design-uni/docs/component/img.md` ## 28. ImgCropper 图片裁剪 图片剪裁组件，用于图片裁剪，支持拖拽、缩放、旋转等操作。 **文档路径**: `doc/wot-design-uni/docs/component/img-cropper.md` ## 29. IndexBar 索引栏 用于列表的索引分类显示和快速定位。 **文档路径**: `doc/wot-design-uni/docs/component/index-bar.md` ## 30. Input 输入框 用户可以在文本框里输入内容。 **文档路径**: `doc/wot-design-uni/docs/component/input.md` ## 31. InputNumber 计数器 由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。 **文档路径**: `doc/wot-design-uni/docs/component/input-number.md` ## 32. Keyboard 虚拟键盘 虚拟数字键盘，用于输入数字、密码、身份证或车牌号等场景。 **文档路径**: `doc/wot-design-uni/docs/component/keyboard.md` ## 33. Layout 布局 用于快速进行布局。 **文档路径**: `doc/wot-design-uni/docs/component/layout.md` ## 34. Loading 加载指示器 加载动画，用于表示加载中的过渡状态。 **文档路径**: `doc/wot-design-uni/docs/component/loading.md` ## 35. Loadmore 加载更多 用于在列表底部展示加载状态。 **文档路径**: `doc/wot-design-uni/docs/component/loadmore.md` ## 36. MessageBox 弹框 弹出对话框，常用于消息提示、消息确认等，支持函数调用。 **文档路径**: `doc/wot-design-uni/docs/component/message-box.md` ## 37. Navbar 导航栏 为页面提供导航功能，常用于页面顶部。 **文档路径**: `doc/wot-design-uni/docs/component/navbar.md` ## 38. NoticeBar 通知栏 通知栏组件，用于在页面顶部展示通知提醒。 **文档路径**: `doc/wot-design-uni/docs/component/notice-bar.md` ## 39. Notify 消息通知 通知类组件，用于在页面顶部展示通知信息。 **文档路径**: `doc/wot-design-uni/docs/component/notify.md` ## 40. NumberKeyboard 数字键盘 虚拟数字键盘，用于输入数字、密码或身份证等场景（已废弃，请使用Keyboard组件）。 **文档路径**: `doc/wot-design-uni/docs/component/number-keyboard.md` ## 41. Overlay 遮罩层 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。 **文档路径**: `doc/wot-design-uni/docs/component/overlay.md` ## 42. Pagination 分页 当数据量过多时，使用分页分解数据。 **文档路径**: `doc/wot-design-uni/docs/component/pagination.md` ## 43. PasswordInput 密码输入框 带网格的输入框组件，可以用于输入密码、短信验证码等场景。 **文档路径**: `doc/wot-design-uni/docs/component/password-input.md` ## 44. Picker 选择器 Picker 组件为 popup 和 pickerView 的组合。 **文档路径**: `doc/wot-design-uni/docs/component/picker.md` ## 45. PickerView 选择器视图 选择器视图，用于从一组数据中选择单个或多个值。 **文档路径**: `doc/wot-design-uni/docs/component/picker-view.md` ## 46. Popover 气泡 常用于展示提示信息。 **文档路径**: `doc/wot-design-uni/docs/component/popover.md` ## 47. Popup 弹出层 弹出层组件，用于展示弹窗、信息提示等内容。 **文档路径**: `doc/wot-design-uni/docs/component/popup.md` ## 48. Progress 进度条 用于展示操作的当前进度。 **文档路径**: `doc/wot-design-uni/docs/component/progress.md` ## 49. Radio 单选框 单选框，用于在一组备选项中进行单选。 **文档路径**: `doc/wot-design-uni/docs/component/radio.md` ## 50. Rate 评分 用于快速的评价操作，或对评价进行展示。 **文档路径**: `doc/wot-design-uni/docs/component/rate.md` ## 51. Resize 监听元素尺寸变化 当组件包裹的文档流尺寸发生变化时，触发 resize 事件。 **文档路径**: `doc/wot-design-uni/docs/component/resize.md` ## 52. RootPortal 根节点传送 是否从页面中脱离出来，用于解决各种 fixed 失效问题，主要用于制作弹窗、弹出层等。 **文档路径**: `doc/wot-design-uni/docs/component/root-portal.md` ## 53. Search 搜索框 搜索框组件，支持输入框聚焦、失焦、输入、搜索、取消、清空事件。 **文档路径**: `doc/wot-design-uni/docs/component/search.md` ## 54. Segmented 分段器 分段器用于展示多个选项并允许用户选择其中单个选项。 **文档路径**: `doc/wot-design-uni/docs/component/segmented.md` ## 55. SelectPicker 单复选选择器 用于从一组选项中进行单选或多选。 **文档路径**: `doc/wot-design-uni/docs/component/select-picker.md` ## 56. Sidebar 侧边导航 垂直展示的导航栏，用于在不同的内容区域之间进行切换。 **文档路径**: `doc/wot-design-uni/docs/component/sidebar.md` ## 57. Signature 签名 用于签名场景，基于 Canvas 实现的签名组件。 **文档路径**: `doc/wot-design-uni/docs/component/signature.md` ## 58. Skeleton 骨架屏 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。 **文档路径**: `doc/wot-design-uni/docs/component/skeleton.md` ## 59. Slider 滑块 支持单向滑块和双向滑块。 **文档路径**: `doc/wot-design-uni/docs/component/slider.md` ## 60. SortButton 排序按钮 用于展示排序按钮，支持升序、降序、重置三种状态。 **文档路径**: `doc/wot-design-uni/docs/component/sort-button.md` ## 61. StatusTip 缺省提示 一般用于兜底占位展示。 **文档路径**: `doc/wot-design-uni/docs/component/status-tip.md` ## 62. Steps 步骤条 用于引导用户按照流程完成任务或向用户展示当前状态。 **文档路径**: `doc/wot-design-uni/docs/component/steps.md` ## 63. Sticky 粘性布局 粘性布局组件，用于在页面滚动时将元素固定在指定位置。 **文档路径**: `doc/wot-design-uni/docs/component/sticky.md` ## 64. SwipeAction 滑动操作 常用于单元格左右滑删除等手势操作。 **文档路径**: `doc/wot-design-uni/docs/component/swipe-action.md` ## 65. Swiper 轮播 用于创建轮播，它支持水平和垂直方向的滑动。 **文档路径**: `doc/wot-design-uni/docs/component/swiper.md` ## 66. Switch 开关 用来打开或关闭选项。 **文档路径**: `doc/wot-design-uni/docs/component/switch.md` ## 67. Table 表格 用于展示多条结构类似的数据，可对数据进行排序等操作。 **文档路径**: `doc/wot-design-uni/docs/component/table.md` ## 68. Tabs 标签页 标签页组件，用于在不同的内容区域之间进行切换。 **文档路径**: `doc/wot-design-uni/docs/component/tabs.md` ## 69. Tabbar 标签栏 底部导航栏，用于在不同页面之间进行切换。 **文档路径**: `doc/wot-design-uni/docs/component/tabbar.md` ## 70. Tag 标签 用于标记状态或者概括主要内容。 **文档路径**: `doc/wot-design-uni/docs/component/tag.md` ## 71. Text 文本 文本组件，用于展示文本信息。 **文档路径**: `doc/wot-design-uni/docs/component/text.md` ## 72. Textarea 文本域 用于输入多行文本信息。 **文档路径**: `doc/wot-design-uni/docs/component/textarea.md` ## 73. Toast 轻提示 轻提示组件，用于消息通知、加载提示、操作结果提示等场景，支持函数式调用。 **文档路径**: `doc/wot-design-uni/docs/component/toast.md` ## 74. Tooltip 文字提示 常用于展示提示信息。 **文档路径**: `doc/wot-design-uni/docs/component/tooltip.md` ## 75. Transition 动画 用于在元素进入或离开时应用过渡效果。 **文档路径**: `doc/wot-design-uni/docs/component/transition.md` ## 76. Upload 上传 图片、视频和文件上传组件。 **文档路径**: `doc/wot-design-uni/docs/component/upload.md` ## 77. Watermark 水印 在页面或组件上添加指定的图片或文字，可用于版权保护、品牌宣传等场景。 **文档路径**: `doc/wot-design-uni/docs/component/watermark.md` ## 78. useCountDown 用于处理倒计时相关的逻辑。 **文档路径**: `doc/wot-design-uni/docs/component/use-count-down.md` --- ## Hooks / Composables 以下是 wot-design-uni 提供的 Hooks（组合式函数），用于在代码中便捷地调用组件功能。 ## 79. useMessage 用于便捷地调用 MessageBox 弹框组件。 **文档路径**: `doc/wot-design-uni/docs/component/use-message.md` ## 80. useNotify 用于便捷地调用 Notify 消息通知组件。 **文档路径**: `doc/wot-design-uni/docs/component/use-notify.md` ## 81. useToast 用于便捷地调用 Toast 轻提示组件。 **文档路径**: `doc/wot-design-uni/docs/component/use-toast.md` ## 82. useUpload 用于处理文件上传和选择相关的逻辑。 **文档路径**: `doc/wot-design-uni/docs/component/use-upload.md` --- ## 总结 本文档共列出了 **82 个可用组件和工具函数**： - **78 个 UI 组件**：涵盖基础组件、表单组件、反馈组件、展示组件、导航组件等 - **4 个 Hooks/Composables**：提供便捷的函数式调用方式 更多详细信息和使用示例，请查看各组件的详细文档。