uView UI 组件库技能

uView UI，是全面兼容 nvue 的 uni-app 生态框架，基于 Vue 2.x，全面的组件和便捷的工具让 uni-app 开发信手拈来。

触发条件

在以下场景中自动调用此技能：

1. 开发 uni-app 页面时（Vue 2.x）
2. 使用 u- 前缀的组件时（如 u-button, u-input, u-form 等）
3. 需要表单、按钮、弹窗、提示、导航等移动端 UI 组件时
4. 需要使用 uView UI 工具函数（防抖、节流、深拷贝、时间格式化等）时
5. 需要 uView UI 的布局系统（u-row, u-col）或常用页面模板时
6. 需要参考 uni-app Vue 2.x 组件库的 API 属性（Props）、事件（Events）、插槽（Slots）时

组件快速索引

基础组件

表单组件

数据展示组件

反馈组件

导航组件

其他组件

工具函数快速索引

指南文档

使用示例

按钮组件

<template>
  <view>
    <u-button type="primary" @click="handleClick">主要按钮</u-button>
    <u-button type="success">成功按钮</u-button>
    <u-button type="warning" plain>镂空按钮</u-button>
    <u-button type="error" disabled>错误按钮</u-button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      uni.showToast({ title: '点击成功', icon: 'success' })
    }
  }
}
</script>

表单组件

<template>
  <view>
    <u-form :model="form" 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-item label="性别" prop="gender">
        <u-radio-group v-model="form.gender">
          <u-radio name="male">男</u-radio>
          <u-radio name="female">女</u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item>
        <u-button type="primary" @click="submit">提交</u-button>
      </u-form-item>
    </u-form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        gender: 'male'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          uni.showToast({ title: '提交成功', icon: 'success' })
        }
      })
    }
  }
}
</script>

提示组件

<template>
  <view>
    <u-button @click="showToast">显示提示</u-button>
    <u-button @click="showModal">显示弹窗</u-button>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$refs.uToast.show({
        title: '操作成功',
        type: 'success',
        duration: 2000
      })
    },
    showModal() {
      uni.showModal({
        title: '提示',
        content: '确认执行此操作？',
        success: (res) => {
          if (res.confirm) {
            this.$refs.uToast.show({ title: '已确认', type: 'success' })
          }
        }
      })
    }
  }
}
</script>

完整文档列表

指南类（8 篇）

• design - 设计指南
• demo - 示例指南
• theme - 主题指南
• customIcon - 自定义图标指南
• customStyle - 自定义样式指南
• i18n - 国际化指南
• note - 注意事项
• faq - 常见问题

开发指南类（11 篇）

• intro - 介绍
• install - 安装
• setting - 配置
• quickstart - 快速上手
• common - 内置样式
• feature - 注意事项
• diff1.x - 对比 1.X
• changelog - 更新日志
• changeGuide - 升级指南
• resource - 资源
• addQQGroup - 加群交流

基础组件（16 个）

• color - Color 色彩
• icon - Icon 图标
• image - Image 图片
• button - Button 按钮
• text - Text 文本
• layout - Layout 布局
• cell - Cell 单元格
• badge - Badge 徽标数
• tag - Tag 标签
• loadingIcon - LoadingIcon 加载动画
• loadingPage - LoadingPage 加载页
• gap - Gap 间隔槽
• avatar - Avatar 头像
• link - Link 超链接
• line - Line 线条
• divider - Divider 分割线

表单组件（16 个）

• form - Form 表单
• input - Input 输入框
• textarea - Textarea 文本域
• checkbox - Checkbox 复选框
• radio - Radio 单选框
• switch - Switch 开关选择器
• slider - Slider 滑动选择器
• numberBox - NumberBox 步进器
• rate - Rate 评分
• picker - Picker 选择器
• datetimePicker - DatetimePicker 时间选择器
• calendar - Calendar 日历
• upload - Upload 上传
• search - Search 搜索
• keyboard - Keyboard 键盘
• code - Code 验证码输入框

数据展示组件（17 个）

• grid - Grid 宫格布局
• list - List 列表
• album - Album 相册
• swiper - Swiper 轮播图
• skeleton - Skeleton 骨架屏
• empty - Empty 内容为空
• collapse - Collapse 折叠面板
• steps - Steps 步骤条
• indexList - IndexList 索引列表
• lineProgress - LineProgress 线形进度条
• countDown - CountDown 倒计时
• countTo - CountTo 数字滚动
• parse - Parse 富文本解析器
• codeInput - CodeInput 验证码输入
• loadMore - LoadMore 加载更多
• readMore - ReadMore 展开阅读更多
• sticky - Sticky 吸顶

反馈组件（12 个）

• toast - Toast 消息提示
• modal - Modal 模态框
• popup - Popup 弹出层
• actionSheet - ActionSheet 操作菜单
• alert - Alert 警告提示
• notify - Notify 消息提示
• noticeBar - NoticeBar 滚动通知
• tooltip - Tooltip 长按提示
• swipeAction - SwipeAction 滑动单元格
• overlay - Overlay 遮罩层
• noNetwork - NoNetwork 无网络提示
• scrollList - ScrollList 横向滚动列表

导航组件（5 个）

• navbar - Navbar 自定义导航栏
• tabbar - Tabbar 底部导航栏
• tabs - Tabs 标签
• subsection - Subsection 分段器
• backTop - BackTop 返回顶部

其他组件（1 个）

• transition - Transition 动画

JS 工具库（17 个）

• js-intro - API 介绍
• fastUse - 便捷工具
• http - Http 请求
• debounce - 节流防抖
• object - 对象操作
• time - 时间格式化
• route - 路由跳转
• randomArray - 数组乱序
• guid - 全局唯一标识符
• colorSwitch - 颜色转换
• color - 颜色值
• queryParams - 对象转 URL 参数
• test - 规则校验
• random - 随机数值
• trim - 去除空格
• getRect - 节点布局信息
• mpShare - 小程序分享