uView Pro uni-app UI component library. Invoke when developing uni-app pages, using uView components (u-button, u-input, u-form, etc.), or needing UI elements like forms, buttons, modals, toasts, navigation.
---
name: uview-pro
description: "uView Pro uni-app UI component library. Invoke when developing uni-app pages, using uView components (u-button, u-input, u-form, etc.), or needing UI elements like forms, buttons, modals, toasts, navigation."
---
# uView Pro 组件库技能
## 触发条件
**在以下场景中自动调用此技能：**
1. 开发 uni-app 页面时
2. 使用 `u-` 前缀的组件时（如 `u-button`, `u-input`, `u-form` 等）
3. 需要表单、按钮、弹窗、提示、导航等 UI 组件时
4. 需要使用工具函数（防抖、节流、深拷贝等）时
5. 需要使用组合式 API 钩子（useToast, useModal, useTheme 等）时
6. 需要 uView Pro 相关的布局模板时
## 组件快速索引
### 基础组件
| 组件 | 说明 | 文档 |
|------|------|------|
| button | 按钮组件 | [button](references/components/button.md) |
| icon | 图标组件 | [icon](references/components/icon.md) |
| image | 图片组件 | [image](references/components/image.md) |
| text | 文本组件 | [text](references/components/text.md) |
| tag | 标签组件 | [tag](references/components/tag.md) |
| badge | 徽章组件 | [badge](references/components/badge.md) |
| link | 链接组件 | [link](references/components/link.md) |
| avatar | 头像组件 | [avatar](references/components/avatar.md) |
### 表单组件
| 组件 | 说明 | 文档 |
|------|------|------|
| form | 表单组件 | [form](references/components/form.md) |
| input | 输入框组件 | [input](references/components/input.md) |
| field | 表单字段组件 | [field](references/components/field.md) |
| textarea | 文本域组件 | [textarea](references/components/textarea.md) |
| checkbox | 复选框组件 | [checkbox](references/components/checkbox.md) |
| radio | 单选框组件 | [radio](references/components/radio.md) |
| switch | 开关组件 | [switch](references/components/switch.md) |
| slider | 滑块组件 | [slider](references/components/slider.md) |
| rate | 评分组件 | [rate](references/components/rate.md) |
| numberBox | 数字输入框组件 | [numberBox](references/components/numberBox.md) |
| upload | 上传组件 | [upload](references/components/upload.md) |
| picker | 选择器组件 | [picker](references/components/picker.md) |
| select | 选择器组件 | [select](references/components/select.md) |
| keyboard | 键盘组件 | [keyboard](references/components/keyboard.md) |
### 数据展示组件
| 组件 | 说明 | 文档 |
|------|------|------|
| card | 卡片组件 | [card](references/components/card.md) |
| grid | 宫格组件 | [grid](references/components/grid.md) |
| cell | 单元格组件 | [cell](references/components/cell.md) |
| collapse | 折叠面板组件 | [collapse](references/components/collapse.md) |
| table | 表格组件 | [table](references/components/table.md) |
| list | 列表组件 | [indexList](references/components/indexList.md) |
| skeleton | 骨架屏组件 | [skeleton](references/components/skeleton.md) |
| empty | 空状态组件 | [empty](references/components/empty.md) |
| loading | 加载组件 | [loading](references/components/loading.md) |
| swiper | 轮播组件 | [swiper](references/components/swiper.md) |
| steps | 步骤组件 | [steps](references/components/steps.md) |
| timeLine | 时间轴组件 | [timeLine](references/components/timeLine.md) |
### 反馈组件
| 组件 | 说明 | 文档 |
|------|------|------|
| toast | 提示组件 | [toast](references/components/toast.md) |
| modal | 模态框组件 | [modal](references/components/modal.md) |
| popup | 弹出层组件 | [popup](references/components/popup.md) |
| actionSheet | 操作菜单组件 | [actionSheet](references/components/actionSheet.md) |
| noticeBar | 通知栏组件 | [noticeBar](references/components/noticeBar.md) |
| alertTips | 警告提示组件 | [alertTips](references/components/alertTips.md) |
| topTips | 顶部提示组件 | [topTips](references/components/topTips.md) |
| loadingPopup | 加载弹窗组件 | [loadingPopup](references/components/loadingPopup.md) |
### 导航组件
| 组件 | 说明 | 文档 |
|------|------|------|
| navbar | 导航栏组件 | [navbar](references/components/navbar.md) |
| tabbar | 标签栏组件 | [tabbar](references/components/tabbar.md) |
| tabs | 标签页组件 | [tabs](references/components/tabs.md) |
| subsection | 分段器组件 | [subsection](references/components/subsection.md) |
| pagination | 分页组件 | [pagination](references/components/pagination.md) |
### 布局组件
| 组件 | 说明 | 文档 |
|------|------|------|
| layout | 布局组件 | [layout](references/components/layout.md) |
| gap | 间距组件 | [gap](references/components/gap.md) |
| divider | 分割线组件 | [divider](references/components/divider.md) |
| line | 线条组件 | [line](references/components/line.md) |
| section | 区块组件 | [section](references/components/section.md) |
| safeAreaInset | 安全区域适配组件 | [safeAreaInset](references/components/safeAreaInset.md) |
### 功能组件
| 组件 | 说明 | 文档 |
|------|------|------|
| calendar | 日历组件 | [calendar](references/components/calendar.md) |
| countDown | 倒计时组件 | [countDown](references/components/countDown.md) |
| countTo | 数字滚动组件 | [countTo](references/components/countTo.md) |
| backTop | 返回顶部组件 | [backTop](references/components/backTop.md) |
| lazyLoad | 懒加载组件 | [lazyLoad](references/components/lazyLoad.md) |
| readMore | 阅读更多组件 | [readMore](references/components/readMore.md) |
| search | 搜索组件 | [search](references/components/search.md) |
| swipeAction | 滑动操作组件 | [swipeAction](references/components/swipeAction.md) |
| transition | 过渡动画组件 | [transition](references/components/transition.md) |
| waterfall | 瀑布流组件 | [waterfall](references/components/waterfall.md) |
## 工具函数快速索引
| 工具 | 说明 | 文档 |
|------|------|------|
| debounce | 防抖工具 | [debounce](references/tools/debounce.md) |
| deepClone | 深拷贝工具 | [deepClone](references/tools/deepClone.md) |
| deepMerge | 深度合并工具 | [deepMerge](references/tools/deepMerge.md) |
| route | 路由工具 | [route](references/tools/route.md) |
| time | 时间工具 | [time](references/tools/time.md) |
| test | 测试工具（验证） | [test](references/tools/test.md) |
| queryParams | 查询参数工具 | [queryParams](references/tools/queryParams.md) |
| guid | 生成GUID工具 | [guid](references/tools/guid.md) |
| random | 随机数工具 | [random](references/tools/random.md) |
| trim | 字符串修剪工具 | [trim](references/tools/trim.md) |
| color | 颜色值工具 | [color](references/tools/color.md) |
| colorSwitch | 颜色转换工具 | [colorSwitch](references/tools/colorSwitch.md) |
## 组合式 API 钩子
| 钩子 | 说明 | 文档 |
|------|------|------|
| useToast | 提示钩子 | [useToast](references/hooks/useToast.md) |
| useModal | 模态框钩子 | [useModal](references/hooks/useModal.md) |
| useTheme | 主题管理钩子 | [useTheme](references/hooks/useTheme.md) |
| useLocale | 国际化钩子 | [useLocale](references/hooks/useLocale.md) |
| useDebounce | 防抖钩子 | [useDebounce](references/hooks/useDebounce.md) |
| useThrottle | 节流钩子 | [useThrottle](references/hooks/useThrottle.md) |
| useColor | 颜色管理钩子 | [useColor](references/hooks/useColor.md) |
## 布局模板
| 布局 | 说明 | 文档 |
|------|------|------|
| login | 登录布局 | [login](references/layout/login.md) |
| address | 地址布局 | [address](references/layout/address.md) |
| citySelect | 城市选择布局 | [citySelect](references/layout/citySelect.md) |
| comment | 评论布局 | [comment](references/layout/comment.md) |
| coupon | 优惠券布局 | [coupon](references/layout/coupon.md) |
| order | 订单布局 | [order](references/layout/order.md) |
| submitBar | 提交栏布局 | [submitBar](references/layout/submitBar.md) |
| menu | 菜单布局 | [menu](references/layout/menu.md) |
| keyboardPay | 键盘支付布局 | [keyboardPay](references/layout/keyboardPay.md) |
| wxCenter | 微信中心布局 | [wxCenter](references/layout/wxCenter.md) |
## 指南文档
| 指南 | 说明 | 文档 |
|------|------|------|
| design | 设计指南 | [design](references/guide/design.md) |
| customTheme | 自定义主题指南 | [customTheme](references/guide/customTheme.md) |
| customStyle | 自定义样式指南 | [customStyle](references/guide/customStyle.md) |
| customIcon | 自定义图标指南 | [customIcon](references/guide/customIcon.md) |
| i18n | 国际化指南 | [i18n](references/guide/i18n.md) |
| faq | 常见问题指南 | [faq](references/guide/faq.md) |
| note | 注意事项指南 | [note](references/guide/note.md) |
## 使用示例
### 按钮组件
```vue
<template>
<u-button type="primary" @click="handleClick">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
<u-button type="warning" plain>镂空按钮</u-button>
</template>
```
### 表单组件
```vue
<template>
<u-form :model="form" :rules="rules" ref="formRef">
<u-form-item label="用户名" prop="username">
<u-input v-model="form.username" placeholder="请输入用户名" />
</u-form-item>
<u-form-item label="密码" prop="password">
<u-input v-model="form.password" type="password" placeholder="请输入密码" />
</u-form-item>
</u-form>
</template>
```
### 提示组件
```vue
<script setup>
import { useToast } from '@/uni_modules/uview-pro'
const toast = useToast()
const showToast = () => {
toast.show({
title: '操作成功',
type: 'success'
})
}
</script>
```
## 完整组件列表
### 指南类 Skills
- [codeHint](references/guide/codeHint.md) - 代码提示指南
- [customIcon](references/guide/customIcon.md) - 自定义图标指南
- [customStyle](references/guide/customStyle.md) - 自定义样式指南
- [customTheme](references/guide/customTheme.md) - 自定义主题指南
- [demo](references/guide/demo.md) - 示例指南
- [design](references/guide/design.md) - 设计指南
- [faq](references/guide/faq.md) - 常见问题指南
- [i18n](references/guide/i18n.md) - 国际化指南
- [note](references/guide/note.md) - 注意事项指南
- [theme](references/guide/theme.md) - 主题指南
- [themeGenerate](references/guide/themeGenerate.md) - 主题生成指南
### 组件类 Skills
- [actionSheet](references/components/actionSheet.md) - 操作菜单组件
- [alertTips](references/components/alertTips.md) - 警告提示组件
- [avatar](references/components/avatar.md) - 头像组件
- [avatarCropper](references/components/avatarCropper.md) - 头像裁剪组件
- [backTop](references/components/backTop.md) - 返回顶部组件
- [badge](references/components/badge.md) - 徽章组件
- [button](references/components/button.md) - 按钮组件
- [calendar](references/components/calendar.md) - 日历组件
- [card](references/components/card.md) - 卡片组件
- [cell](references/components/cell.md) - 单元格组件
- [checkbox](references/components/checkbox.md) - 复选框组件
- [circleProgress](references/components/circleProgress.md) - 圆形进度条组件
- [collapse](references/components/collapse.md) - 折叠面板组件
- [color](references/components/color.md) - 颜色组件
- [common](references/components/common.md) - 通用组件
- [configProvider](references/components/configProvider.md) - 配置提供者组件
- [countDown](references/components/countDown.md) - 倒计时组件
- [countTo](references/components/countTo.md) - 数字滚动组件
- [divider](references/components/divider.md) - 分割线组件
- [downloadSetting](references/components/downloadSetting.md) - 下载设置组件
- [dropdown](references/components/dropdown.md) - 下拉菜单组件
- [empty](references/components/empty.md) - 空状态组件
- [fab](references/components/fab.md) - 悬浮按钮组件
- [feature](references/components/feature.md) - 特性组件
- [field](references/components/field.md) - 表单字段组件
- [form](references/components/form.md) - 表单组件
- [fullScreen](references/components/fullScreen.md) - 全屏组件
- [gap](references/components/gap.md) - 间距组件
- [grid](references/components/grid.md) - 宫格组件
- [icon](references/components/icon.md) - 图标组件
- [image](references/components/image.md) - 图片组件
- [indexList](references/components/indexList.md) - 索引列表组件
- [input](references/components/input.md) - 输入框组件
- [install](references/components/install.md) - 安装组件
- [keyboard](references/components/keyboard.md) - 键盘组件
- [layout](references/components/layout.md) - 布局组件
- [lazyLoad](references/components/lazyLoad.md) - 懒加载组件
- [line](references/components/line.md) - 线条组件
- [lineProgress](references/components/lineProgress.md) - 线性进度条组件
- [link](references/components/link.md) - 链接组件
- [loading](references/components/loading.md) - 加载组件
- [loadingPopup](references/components/loadingPopup.md) - 加载弹窗组件
- [loadMore](references/components/loadMore.md) - 加载更多组件
- [mask](references/components/mask.md) - 遮罩组件
- [messageInput](references/components/messageInput.md) - 消息输入组件
- [modal](references/components/modal.md) - 模态框组件
- [navbar](references/components/navbar.md) - 导航栏组件
- [noNetwork](references/components/noNetwork.md) - 无网络组件
- [noticeBar](references/components/noticeBar.md) - 通知栏组件
- [npmSetting](references/components/npmSetting.md) - npm设置组件
- [numberBox](references/components/numberBox.md) - 数字输入框组件
- [nvue](references/components/nvue.md) - nvue组件
- [pagination](references/components/pagination.md) - 分页组件
- [picker](references/components/picker.md) - 选择器组件
- [popup](references/components/popup.md) - 弹出层组件
- [quickstart](references/components/quickstart.md) - 快速开始组件
- [radio](references/components/radio.md) - 单选框组件
- [rate](references/components/rate.md) - 评分组件
- [readMore](references/components/readMore.md) - 阅读更多组件
- [safeAreaInset](references/components/safeAreaInset.md) - 安全区域适配组件
- [search](references/components/search.md) - 搜索组件
- [section](references/components/section.md) - 区块组件
- [select](references/components/select.md) - 选择器组件
- [skeleton](references/components/skeleton.md) - 骨架屏组件
- [slider](references/components/slider.md) - 滑块组件
- [steps](references/components/steps.md) - 步骤组件
- [sticky](references/components/sticky.md) - 粘性组件
- [subsection](references/components/subsection.md) - 分段器组件
- [swipeAction](references/components/swipeAction.md) - 滑动操作组件
- [swiper](references/components/swiper.md) - 轮播组件
- [switch](references/components/switch.md) - 开关组件
- [tabbar](references/components/tabbar.md) - 标签栏组件
- [table](references/components/table.md) - 表格组件
- [tabs](references/components/tabs.md) - 标签页组件
- [tabsSwiper](references/components/tabsSwiper.md) - 标签轮播组件
- [tag](references/components/tag.md) - 标签组件
- [text](references/components/text.md) - 文本组件
- [textarea](references/components/textarea.md) - 文本域组件
- [timeLine](references/components/timeLine.md) - 时间轴组件
- [toast](references/components/toast.md) - 提示组件
- [topTips](references/components/topTips.md) - 顶部提示组件
- [transition](references/components/transition.md) - 过渡动画组件
- [uniModulesSetting](references/components/uniModulesSetting.md) - uni_modules设置组件
- [upload](references/components/upload.md) - 上传组件
- [verificationCode](references/components/verificationCode.md) - 验证码组件
- [vuexDetail](references/components/vuexDetail.md) - Vuex详情组件
- [waterfall](references/components/waterfall.md) - 瀑布流组件
### 工具类 Skills
- [color](references/tools/color.md) - 颜色值工具
- [colorSwitch](references/tools/colorSwitch.md) - 颜色转换工具
- [debounce](references/tools/debounce.md) - 防抖工具
- [deepClone](references/tools/deepClone.md) - 深拷贝工具
- [deepMerge](references/tools/deepMerge.md) - 深度合并工具
- [fastUse](references/tools/fastUse.md) - 快速使用工具
- [getRect](references/tools/getRect.md) - 获取元素尺寸工具
- [guid](references/tools/guid.md) - 生成GUID工具
- [md5](references/tools/md5.md) - MD5加密工具
- [mpShare](references/tools/mpShare.md) - 小程序分享工具
- [queryParams](references/tools/queryParams.md) - 查询参数工具
- [random](references/tools/random.md) - 随机数工具
- [randomArray](references/tools/randomArray.md) - 随机数组工具
- [route](references/tools/route.md) - 路由工具
- [test](references/tools/test.md) - 测试工具
- [time](references/tools/time.md) - 时间工具
- [trim](references/tools/trim.md) - 字符串修剪工具
### 钩子类 Skills
- [useColor](references/hooks/useColor.md) - 颜色管理钩子
- [useDebounce](references/hooks/useDebounce.md) - 防抖钩子
- [useLocale](references/hooks/useLocale.md) - 国际化钩子
- [useModal](references/hooks/useModal.md) - 模态框钩子
- [useTheme](references/hooks/useTheme.md) - 主题管理钩子
- [useThrottle](references/hooks/useThrottle.md) - 节流钩子
- [useToast](references/hooks/useToast.md) - 提示钩子
### 布局类 Skills
- [address](references/layout/address.md) - 地址布局
- [citySelect](references/layout/citySelect.md) - 城市选择布局
- [comment](references/layout/comment.md) - 评论布局
- [coupon](references/layout/coupon.md) - 优惠券布局
- [keyboardPay](references/layout/keyboardPay.md) - 键盘支付布局
- [login](references/layout/login.md) - 登录布局
- [menu](references/layout/menu.md) - 菜单布局
- [order](references/layout/order.md) - 订单布局
- [submitBar](references/layout/submitBar.md) - 提交栏布局
- [wxCenter](references/layout/wxCenter.md) - 微信中心布局
Creator's repository · uview-pro/skills