14 KiB

Raw Blame History

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

为页面提供导航功能，常用于页面顶部。

文档路径: 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

常用于展示提示信息。

文档路径: doc/wot-design-uni/docs/component/popover.md

弹出层组件，用于展示弹窗、信息提示等内容。

文档路径: 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

常用于展示提示信息。

文档路径: 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：提供便捷的函数式调用方式

更多详细信息和使用示例，请查看各组件的详细文档。

14 KiB Raw Blame History Unescape Escape