编程

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

它能做什么

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

组件快速索引

基础组件

组件说明文档
buttonButton 按钮button
iconIcon 图标icon
imageImage 图片image
textText 文本text
layoutLayout 布局layout
cellCell 单元格cell
badgeBadge 徽标数badge
tagTag 标签tag
avatarAvatar 头像avatar
linkLink 超链接link
colorColor 色彩color
loadingIconLoadingIcon 加载动画loadingIcon
loadingPageLoadingPage 加载页loadingPage
gapGap 间隔槽gap
lineLine 线条line
dividerDivider 分割线divider

表单组件

组件说明文档
formForm 表单form
inputInput 输入框input
textareaTextarea 文本域textarea
checkboxCheckbox 复选框checkbox
radioRadio 单选框radio
switchSwitch 开关选择器switch
sliderSlider 滑动选择器slider
numberBoxNumberBox 步进器numberBox
rateRate 评分rate
pickerPicker 选择器picker
datetimePickerDatetimePicker 时间选择器datetimePicker
calendarCalendar 日历calendar
uploadUpload 上传upload
searchSearch 搜索search
keyboardKeyboard 键盘keyboard
codeCode 验证码输入框code

数据展示组件

组件说明文档
gridGrid 宫格布局grid
listList 列表list
albumAlbum 相册album
swiperSwiper 轮播图swiper
skeletonSkeleton 骨架屏skeleton
emptyEmpty 内容为空empty
collapseCollapse 折叠面板collapse
stepsSteps 步骤条steps
indexListIndexList 索引列表indexList
lineProgressLineProgress 线形进度条lineProgress
countDownCountDown 倒计时countDown
countToCountTo 数字滚动countTo
parseParse 富文本解析器parse
codeInputCodeInput 验证码输入codeInput
loadMoreLoadMore 加载更多loadMore
readMoreReadMore 展开阅读更多readMore
stickySticky 吸顶sticky

反馈组件

组件说明文档
toastToast 消息提示toast
modalModal 模态框modal
popupPopup 弹出层popup
actionSheetActionSheet 操作菜单actionSheet
alertAlert 警告提示alert
notifyNotify 消息提示notify
noticeBarNoticeBar 滚动通知noticeBar
tooltipTooltip 长按提示tooltip
swipeActionSwipeAction 滑动单元格swipeAction
overlayOverlay 遮罩层overlay
noNetworkNoNetwork 无网络提示noNetwork
scrollListScrollList 横向滚动列表scrollList

导航组件

组件说明文档
navbarNavbar 自定义导航栏navbar
tabbarTabbar 底部导航栏tabbar
tabsTabs 标签tabs
subsectionSubsection 分段器subsection
backTopBackTop 返回顶部backTop

其他组件

组件说明文档
transitionTransition 动画transition

工具函数快速索引

工具说明文档
httpHttp 请求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

使用示例

按钮组件


  
    主要按钮
    成功按钮
    镂空按钮
    错误按钮
  


表单组件


  
    
      
        
      
      
        
      
      
        
          男
          女
        
      
      
        提交
      
    
  


提示组件


  
    显示提示
    显示弹窗
    
  


完整文档列表

指南类(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 - 小程序分享

相关技能

Element UI Vue2 desktop component library. Invoke when developing Vue 2.x pages, using el- prefix components (button/input/form/table/dialog etc). ⚠️ Upload requires server-side validation.

3 次安装1 星标

Element UI 基于 Vue 2.0 的桌面端组件库中文文档 - 包含 60+ 组件的 API 参考、使用示例、设计指南、安装快速上手

1 次安装1 星标

Element Plus Vue3 desktop component library. Invoke when developing Vue 3.x pages, using Element Plus components (el-button, el-input, el-form, el-table, etc...

3 次安装2 星标

UI组件生成工具免费版为个人开发者提供常用HTML/CSS组件的快速生成能力,覆盖表单、表格、卡片、模态框、导航栏等基础组件。核心能力: - 表单组件生成(输入框、选择器、复选框) - 表格组件生成(基础表格、带样式表格) - 卡片组件生成(信息卡片、产品卡片) - 模态框组件生成(基础弹窗) - 导航栏组件生成(顶部导航) 适用场景: - 个人项目快速搭建页面原型 - 学习HTML/CSS组件结构 - 快速生成可运行的单文件HTML组件 差异化:免费版聚焦个人开发者的基础组件需求,输出单文件HTML

UI 视觉设计系统——配色主题(10预设+自定义生成)+ 美学变体(soft/minimalist/brutalist)+ 协同选择流程

2 次安装

A UI design specification system based on off-the-shelf UI frameworks (Element Plus, Ant Design, Arco Design, TDesign, Semi Design). Suitable for projects using framework-built-in components, as opposed to headless component libraries (shadcn/ui, Radix UI). Use when: generating UI code with a specified framework, reviewing existing code for framework compliance, recommending between frameworks, or migrating code from one framework to another. Keywords: Element Plus, Ant Design, Arco Design, TDesign, Semi Design, framework components, Vue components, React components, framework migration, design tokens, theme variables.