uView UI

uView UI uni-app component library for Vue 2. Invoke when developing uni-app pages with Vue 2, using uView components (u-button, u-input, u-form, etc.), or needing UI elements like forms, buttons, modals, toasts, navigation for multi-platform apps.

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）时

组件快速索引

基础组件

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

表单组件

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

数据展示组件

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

反馈组件

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

导航组件

组件	说明	文档
navbar	Navbar 自定义导航栏	navbar
tabbar	Tabbar 底部导航栏	tabbar
tabs	Tabs 标签	tabs
subsection	Subsection 分段器	subsection
backTop	BackTop 返回顶部	backTop

其他组件

组件	说明	文档
transition	Transition 动画	transition

工具函数快速索引

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

指南文档

指南	说明	文档
design	设计指南	design
demo	示例指南	demo
theme	主题指南	theme
customIcon	自定义图标指南	customIcon
customStyle	自定义样式指南	customStyle
i18n	国际化指南	i18n
note	注意事项	note
faq	常见问题	faq
intro	介绍	intro
install	安装	install
setting	配置	setting
quickstart	快速上手	quickstart
common	内置样式	common
feature	注意事项	feature
changelog	更新日志	changelog
changeGuide	升级指南	changeGuide

使用示例

按钮组件

vue

<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>

表单组件

vue

<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>

提示组件

vue

<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 - 小程序分享