@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/gap.md

@@ -0,0 +1,49 @@
+## Gap 间隔槽 <to-api/>
+
+<demo-model url="/pages/componentsA/gap/gap"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-gap**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-gap)
+
+:::
+
+该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+直接引入即可使用
+- 通过`height`配置高度，单位`px(rpx)`
+- 通过`bgColor`配置背景颜色
+
+```vue
+<uv-gap height="80" bgColor="#bbb"></uv-gap>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Gap Props
+
+| 参数			| 说明						| 类型					| 默认值					| 可选值		|
+|:-				|:-							|:-						|:-						|:-			|
+| bgColor		| 背景颜色					| String				| transparent(背景透明)	| -			|
+| height		| 间隔槽高度，单位`px(rpx)`		| String &#124; Number	| 20					| -			|
+| marginTop		| 与前一个元素的距离，单位`px(rpx)`	| String &#124; Number	| 0						| -			|
+| marginBottom	| 与后一个元素的距离，单位`px(rpx)`	| String &#124; Number	| 0						| -			|

package/docs/components/grid.md

@@ -0,0 +1,225 @@
+## Grid 宫格布局 <to-api/>
+
+<demo-model url="/pages/componentsC/grid/grid"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-grid > uv-grid-item**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-grid)
+
+:::
+
+宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件([badge](/components/badge.html))，或者图标等，也可以扩展为左右滑动的轮播形式。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√(仅支持微信小程序，[原因](https://www.uvui.cn/components/problem.html#%E4%B8%83%E3%80%81uv-row%E3%80%81uv-grid%E7%AD%89%E7%BB%84%E4%BB%B6%E5%9C%A8%E7%99%BE%E5%BA%A6%E5%B0%8F%E7%A8%8B%E5%BA%8F%E3%80%81%E6%8A%96%E9%9F%B3%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AD%89%E5%B9%B3%E5%8F%B0%E6%98%BE%E7%A4%BA%E5%BC%82%E5%B8%B8))|√|√|
+
+### 基本使用
+
+- 该组件外层为`uv-grid`组件包裹，通过`col`设置内部宫格的列数
+- 内部通过`uv-grid-item`组件的`slot`设置宫格的内容
+- 如果不需要宫格的边框，可以设置`border`为`false`
+
+```vue
+<template>
+	<view>
+		<uv-grid :border="false">
+			<uv-grid-item v-for="(item,index) in baseList" :key="index">
+				<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
+				<text class="grid-text">{{item.title}}</text>
+			</uv-grid-item>
+		</uv-grid>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const baseList = ref([{
+  name: 'photo',
+  title: '李白'
+}, {
+  name: 'lock',
+  title: '韩信'
+}, {
+  name: 'star',
+  title: '刘备'
+}]);
+
+</script>
+<style lang="scss">
+	.grid-text {
+		font-size: 14px;
+		color: #909399;
+	}
+</style>
+```
+
+### 绑定点击事件&自定义列数
+
+通过`col`属性设置列数，默认列数为3
+
+```vue
+<template>
+	<view>
+		<uv-grid :col="4" @click="click">
+			<uv-grid-item v-for="(item,index) in baseList" :key="index">
+				<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
+				<text class="grid-text">{{item.title}}</text>
+			</uv-grid-item>
+		</uv-grid>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const baseList = ref([{
+  name: 'photo',
+  title: '李白'
+}, {
+  name: 'lock',
+  title: '韩信'
+}, {
+  name: 'star',
+  title: '刘备'
+}, {
+  name: 'star',
+  title: '元芳'
+}]);
+function click(name) {
+  uni.showToast({
+    icon: 'none',
+    title: `点击了第${name}个`
+  });
+}
+
+</script>
+<style lang="scss">
+	.grid-text {
+		font-size: 14px;
+		color: #909399;
+	}
+</style>
+```
+
+### 实现宫格的左右滑动
+
+结合`uni`的`swiper`组件可以实现宫格的左右滑动，因为`swiper`特性的关系，请指定`swiper`的高度 ，否则`swiper`的高度不会被内容撑开，可以自定义`swiper`的指示器，达到更高的灵活度
+
+```vue
+<template>
+	<view>
+		<swiper :indicator-dots="true" class="swiper">
+			<swiper-item>
+				<uv-grid :border="true" align="center">
+					<uv-grid-item 
+						:customStyle="{width:220+'rpx',height:220+'rpx'}" 
+						v-for="(item, index) in swiperList" 
+						:index="index" 
+						:key="index">
+						<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item" :size="22"></uv-icon>
+						<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
+					</uv-grid-item>
+				</uv-grid>
+			</swiper-item>
+			<swiper-item>
+				<uv-grid :border="true" align="center">
+					<uv-grid-item 
+						:customStyle="{width:220+'rpx',height:220+'rpx'}" 
+						v-for="(item, index) in swiperList" 
+						:index="index + 9" 
+						:key="index">
+						<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item" :size="22"></uv-icon>
+						<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
+					</uv-grid-item>
+				</uv-grid>
+			</swiper-item>
+			<swiper-item>
+				<uv-grid :border="true" align="center">
+					<uv-grid-item 
+						:customStyle="{width:220+'rpx',height:220+'rpx'}" 
+						v-for="(item, index) in swiperList" 
+						:index="index + 18" 
+						:key="index">
+						<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item" :size="22"></uv-icon>
+						<text class="grid-text">{{ "宫格" + (index + 1) }}</text>
+					</uv-grid-item>
+				</uv-grid>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const swiperList = ref(['integral', 'kefuv-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'volume-off', 'email', 'list']);
+
+</script>
+<style lang="scss">
+	.swiper {
+		height: 720rpx;
+	}
+	.grid-text {
+		font-size: 14px;
+		color: #909399;
+		padding: 10rpx 0 20rpx 0rpx;
+		/* #ifndef APP-PLUS */
+		box-sizing: border-box;
+		/* #endif */
+	}
+</style>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Grid Props
+
+| 参数	| 说明											| 类型					| 默认值	| 可选值			|
+|:-		|:-												|:-						|:-		|:-				|
+| col	| 宫格的列数										| String &#124; Number	| 3		| -				|
+| border| 是否显示宫格的边框								| Boolean | true | true &#124; false			|
+| align	| 宫格的对齐方式，用于控制只有一两个宫格时的对齐场景	| String | left	| left &#124; center &#124; right|
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### GridItem Props
+
+| 参数		| 说明			| 类型					| 默认值					|  可选值	|
+|:-			|:-				|:-						|:-						|:-			|
+| name		| 宫格的`name`		| String &#124; Number	| -						| -			|
+| bgColor	| 宫格的背景颜色	| String				| transparent(背景透明)	| -			|
+
+### Grid Events
+
+注意：请在`<uv-grid></uv-grid>`上监听此事件
+
+|事件名	|说明			|回调参数	|
+|:-		|:-				|:-			|
+|@click	|点击宫格触发		|name		|
+
+
+### GridItem Events
+
+注意：请在`<uv-grid-item></uv-grid-item>`上监听此事件
+
+|事件名	|说明			|回调参数	|
+|:-		|:-				|:-			|
+|@click	|点击宫格触发		|name		|
+
+
+<style scoped>
+h3[id=grid-props] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+</style>

package/docs/components/icon.md

@@ -0,0 +1,101 @@
+
+## Icon 图标 <to-api/>
+
+<demo-model url="/pages/componentsA/icon/icon"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-icon**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-icon)
+
+:::
+
+基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+<br>
+
+通过`<uv-icon>`形式来调用，设置`name`参数为图标名即可。其中`color`默认为`#606266`，`size`默认为`16px`
+
+```vue
+<uv-icon name="photo"></uv-icon>
+```
+
+### 修改图标的样式
+
+- 通过`color`参数修改图标的颜色
+- 通过`size`参数修改图标的大小，单位为px
+
+```vue
+<uv-icon name="photo" color="#2979ff" size="28"></uv-icon>
+```
+
+### 图片图标
+
+这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为`png`格式的正方形图标。
+
+使用方法：给组件的`name`参数传入一个图片链接即可显示字体图标，链接规则是由`/`斜杠或`base64`图片地址，同时`size`参数
+也被设置为这个图片图标的宽度，由于是图片，如颜色`color`等参数都会失效。
+
+```vue
+<!-- 在线地址 -->
+<uv-icon size="40" name="https://via.placeholder.com/50x50.png/3c9cff/fff"></uv-icon>
+<!-- base64地址图标，仅作演示 -->
+<uv-icon size="40" name="data:image/png;base64,..."></uv-icon>
+```
+
+### 自定义图标 
+
+详见：[扩展自定义图标库](/guide/customIcon.html)
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+
+---
+
+### Icon Props
+
+| 参数			| 说明																													| 类型					|  默认值					|  可选值				|
+|:-				|:-																														|:-						|:-							|:-						|
+| name			| 图标名称，若带有`/`或遵循`base64`图片格式，会被认为是图片图标																	| String				| -							| -						|
+| color			| 图标颜色，接受主题色eg: `color="primary"`																												| String				| #606266	| -						|
+| size			| 图标字体大小，单位`px(rpx)`								| String &#124; Number	| 16px						| -						|
+| bold			| 是否显示粗体																											| Boolean				| false						| true &#124; false						|
+| index			| 一个用于区分多个图标的值，点击图标时通过`click`事件传出																		| String &#124; Number	| -							| -						|
+| hoverClass	| 图标按下去的样式类，用法同uni的`view`组件的`hover-class`参数，详见：[hover-class](https://uniapp.dcloud.io/component/view)	| String				| -							| -						|
+| customPrefix	| 自定义字体图标库时，需要写上此值，详见：[扩展自定义图标库](/guide/customIcon.html)，注意：nvue暂时不支持				    | String				|uvicon						| -						|
+| label			| 图标右侧 / 下方的label文字																								| String &#124; Number	| -							| -						|
+| labelPos		| `label`相对于图标的位置																									| String				| right						| right &#124; bottom &#124; top &#124; left	|
+| labelSize		| `label`字体大小，单位px																								| String &#124; Number	| 15px						| -						|
+| labelColor	| `label`字体颜色																										| String				| 	#606266	| -						|
+| space			| `label`与图标的距离，单位`px(rpx)`									| String &#124; Number	| 3px						| -						|
+| imgMode		| 图片裁剪、缩放的模式，image组件原生属性，详见：[image](https://uniapp.dcloud.io/component/image?id=image)					| String				| -							| -						|
+| width			| `name`为图片图标时图片的宽度，单位`px(rpx)`																					| String &#124; Number	| -							| -						|
+| height		| `name`为图片图标时图片的高度，单位`px(rpx)`									| String &#124; Number	| -							| -						|
+| top			| 图标到顶部的距离，如果某些场景，如果图标没有垂直居中，可以调整此参数，单位`px(rpx)`												| String &#124; Number	| 0							| -						|
+| stop			| 是否阻止事件传播																										| Boolean				| false						| true &#124; false					|
+
+### Icon Events
+
+|事件名	|说明			|回调参数							|版本	|
+|:-		|:-				|:-									|:-		|
+|@click	|点击图标时触发	|index: 通过`props`传递的`index`值	|-		|
+
+### 图标集
+
+图标名称以包内组件和示例项目实际可用的图标集为准。需要扩展自定义图标时，请查看 [自定义图标](../guide/customIcon.md)。

package/docs/components/image.md

@@ -0,0 +1,182 @@
+## Image 图片 <to-api/>
+
+<demo-model url="/pages/componentsA/image/image"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-image**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-image)
+
+:::
+
+此组件为uni-app的`image`组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。 
+
+我们在图片中加入了`observer`懒加载的思想，由于官方提供的`lazyLoad`懒加载有些限制，可能在实际项目中并不能满足需求，`observer`可以真正意义上实现懒加载，具体使用会在下面有介绍。
+
+**我们推荐您在任何使用图片场景的地方，都优先考虑使用这个小巧，uv-image精致而实用的组件。**
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+
+### 基本使用
+
+配置图片的`width`宽和`height`高，以及`src`路径即可使用。
+
+```vue
+<template>
+	<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="80px" height="80px"></uv-image>
+</template>
+```
+
+### 图片裁剪、缩放的模式
+
+通过`mode`参数配置填充模式，此模式用法与uni-app的`image`组件的`mode`参数完全一致，详见：[Image](https://uniapp.dcloud.io/component/image)
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></uv-image>
+```
+
+### 图片形状
+
+- 通过`shape`参数设置图片的形状，`circle`为圆形，`square`为方形
+- 如果为方形时，还可以通过`radius`属性设置圆角值
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></uv-image>
+```
+
+
+### 懒加载
+
+注意：此功能只对微信小程序、App、百度小程序、字节跳动小程序有效，且只针对page与scroll-view下的image有效，默认开启。
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true"></uv-image>
+```
+
+### observer懒加载
+
+- 通过`observeLazyLoad`为`true`即可开启该功能，效果：在该图片滑动到可视范围内的时候才会去请求加载图片。
+- 注意：此功能在`nvue`页面不生效，因为nvue并不支持`uni.createIntersectionObserver()`，默认关闭。
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" :observeLazyLoad="true"></uv-image>
+```
+
+### 加载中提示
+
+图片加载过程中，为加载中状态(默认显示一个小图标)，可以通过`loading`自定义插槽，结合uv-ui的`uv-loading`组件，实现加载的动画效果。
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg">
+  <template v-slot:loading>
+    <uv-loading-icon color="red"></uv-loading-icon>
+  </template>
+</uv-image>
+```
+
+
+### 加载错误提示
+
+图片加载失败时，默认显示一个错误提示图标，可以通过`error`自定义插槽，实现个性化的提示方式。
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg">
+	<template v-slot:error>
+		<view style="font-size: 24rpx;">加载失败</view>
+	</template>
+</uv-image>
+```
+
+
+### 淡入动画
+
+组件自带了加载完成时的淡入动画效果：
+
+- 通过`fade`参数配置是否开启动画效果
+- 通过`duration`参数配置动画的过渡时间，单位ms
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" :fade="true" duration="450"></uv-image>
+```
+
+
+### 事件冒泡
+
+默认情况下，组件是允许内部向外事件冒泡的，因为很多情况下，我们都希望点击图片，同时图片所在的父元素的点击事件也能触发。  
+如果您想避免事件冒泡，那么您可以在组件外面嵌套一个`view`，同时给它加上`@tap.stop`即可。 
+
+```vue
+<!-- 点击图片将不会触发clickHandler -->
+<view @tap="clickHandler">
+	<view @tap.stop>
+		<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg"></uv-image>
+	</view>
+</view>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Image Props
+
+| 参数					| 说明														| 类型					| 默认值			|  可选值	|
+|:-						|:-															|:-						|:-				|:-			|
+| src					| 图片地址，**强烈建议**使用绝对或者网络路径					| String				| -				| -			|
+| mode					| 裁剪模式，见上方说明										| String				| aspectFill	| -			|
+| width					| 宽度，单位任意，如果为数值，默认单位`px(rpx)`						| String &#124; Number	| 300			| -			|
+| height				| 高度，单位任意，如果为数值，默认单位`px(rpx)`						| String &#124; Number	| 225			| -			|
+| shape					| 图片形状，`circle` - 圆形，`square` - 方形							| String				| square		| square	|
+| radius				| 圆角，默认单位px											| String &#124; Number	| 0				| -			|
+| lazyLoad				| 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效	| Boolean				| true &#124; false			| -			|
+| observeLazyLoad | 是否observer懒加载，在该图片滑动到可视范围内的时候才会去请求加载图片。nvue页面不生效。 | Boolean | false| true &#124; false|
+| showMenuByLongpress	| 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效			| Boolean				| true			| -			|
+| loadingIcon			| 加载中的图标，或者小图片										| String				| photo			| -			|
+| errorIcon				| 加载失败的图标，或者小图片									| String				| error-circle	| -			|
+| showLoading			| 是否显示加载中的图标或者自定义的`slot`							| Boolean				| true			| true &#124; false		|
+| showError				| 是否显示加载错误的图标或者自定义的`slot`						| Boolean				| true			| true &#124; false		|
+| fade					| 是否需要淡入效果											| Boolean				| true			| true &#124; false		|
+| webp					| 只支持网络资源，只对微信小程序有效							| Boolean				| false			| true &#124; false		|
+| duration				| 搭配`fade`参数的过渡时间，单位`ms`								| String &#124; Number	| 500			| -			|
+| bgColor				| 背景颜色，用于深色页面加载图片时，为了和背景色融合				| String				| #f3f4f6		| -			|
+| cellChild | 是否属于cell节点下。`nvue`模式下的该组件在cell或uv-list等组件下使用，该值最好是设置成true，避免回收后不显示的BUG。 | Boolean | false | true &#124; false|
+| customStyle | 自定义样式 | Object | - | - |
+
+
+### Image Slots
+
+|名称		|说明					|
+|:-			|:-						|
+| loading	| 自定义加载中的提示内容	|
+| error		| 自定义失败的提示内容	|
+
+
+### Image Events
+
+|事件名	|说明				|回调参数		|
+|:-		|:-					|:-				|
+| @click	| 点击图片时触发		| -				|
+| @error	| 图片加载失败时触发	| err: 错误信息	|
+| @load	| 图片加载成功时触发	| -				|
+
+<style scoped>
+h3[id=image-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+h3[id=image-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+</style>

package/docs/components/index.md

@@ -0,0 +1,110 @@
+# 组件
+
+`@gmcb/uv-ui` 提供一组以 `uv-` 开头的 uni-app 多端组件。推荐通过 easycom 使用组件，不需要在页面内逐个 `import`。
+
+## easycom
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^uv-(.*)": "@gmcb/uv-ui/components/uv-$1/uv-$1.vue"
+    }
+  }
+}
+```
+
+## 基础组件
+
+| 组件 | 说明 |
+| --- | --- |
+| [button](./button.md) | 按钮。 |
+| [icon](./icon.md) | 图标。 |
+| [image](./image.md) | 图片。 |
+| [text](./text.md) | 文本。 |
+| [link](./link.md) | 链接。 |
+| [tag](./tag.md) | 标签。 |
+| [badge](./badge.md) | 徽标。 |
+| [avatar](./avatar.md) | 头像。 |
+| [line](./line.md) | 分割线。 |
+| [gap](./gap.md) | 间隔。 |
+
+## 布局与导航
+
+| 组件 | 说明 |
+| --- | --- |
+| [layout](./layout.md) | 栅格布局。 |
+| [grid](./grid.md) | 宫格。 |
+| [cell](./cell.md) | 单元格。 |
+| [navbar](./navbar.md) | 自定义导航栏。 |
+| [tabbar](./tabbar.md) | 底部导航。 |
+| [tabs](./tabs.md) | 标签页。 |
+| [sticky](./sticky.md) | 吸顶。 |
+| [indexList](./indexList.md) | 索引列表。 |
+| [list](./list.md) | 列表。 |
+| [scrollList](./scrollList.md) | 横向滚动列表。 |
+
+## 表单
+
+| 组件 | 说明 |
+| --- | --- |
+| [form](./form.md) | 表单。 |
+| [input](./input.md) | 输入框。 |
+| [textarea](./textarea.md) | 多行输入。 |
+| [checkbox](./checkbox.md) | 复选框。 |
+| [radio](./radio.md) | 单选框。 |
+| [switch](./switch.md) | 开关。 |
+| [slider](./slider.md) | 滑块。 |
+| [numberBox](./numberBox.md) | 步进器。 |
+| [rate](./rate.md) | 评分。 |
+| [upload](./upload.md) | 上传。 |
+| [codeInput](./codeInput.md) | 验证码输入。 |
+| [keyboard](./keyboard.md) | 键盘。 |
+
+## 反馈与弹层
+
+| 组件 | 说明 |
+| --- | --- |
+| [popup](./popup.md) | 弹出层。 |
+| [modal](./modal.md) | 模态框。 |
+| [toast](./toast.md) | 轻提示。 |
+| [notify](./notify.md) | 消息通知。 |
+| [actionSheet](./actionSheet.md) | 操作菜单。 |
+| [overlay](./overlay.md) | 遮罩。 |
+| [tooltip](./tooltip.md) | 文字提示。 |
+| [loadingIcon](./loadingIcon.md) | 加载图标。 |
+| [loadingPage](./loadingPage.md) | 加载页。 |
+| [loadMore](./loadMore.md) | 加载更多。 |
+| [noNetwork](./noNetwork.md) | 无网络提示。 |
+
+## 数据与展示
+
+| 组件 | 说明 |
+| --- | --- |
+| [calendar](./calendar.md) | 日历。 |
+| [calendars](./calendars.md) | 多日历。 |
+| [datetimePicker](./datetimePicker.md) | 日期时间选择。 |
+| [picker](./picker.md) | 选择器。 |
+| [swiper](./swiper.md) | 轮播。 |
+| [album](./album.md) | 相册。 |
+| [waterfall](./waterfall.md) | 瀑布流。 |
+| [qrcode](./qrcode.md) | 二维码。 |
+| [parse](./parse.md) | 富文本解析。 |
+| [skeleton](./skeleton.md) | 骨架屏。 |
+| [empty](./empty.md) | 空状态。 |
+| [steps](./steps.md) | 步骤条。 |
+| [countDown](./countDown.md) | 倒计时。 |
+| [countTo](./countTo.md) | 数字滚动。 |
+| [lineProgress](./lineProgress.md) | 线形进度条。 |
+| [circleProgress](./circleProgress.md) | 圆形进度条。 |
+
+## 其他
+
+| 文档 | 说明 |
+| --- | --- |
+| [安装](./install.md) | 安装说明。 |
+| [快速上手](./quickstart.md) | 快速使用。 |
+| [扩展配置](./setting.md) | `$uv`、主题和默认 props 配置。 |
+| [常见问题](./problem.md) | 组件常见问题。 |
+| [nvue](./nvue.md) | nvue 兼容说明。 |