update uni-ui 新增代码预览

docs/.vuepress/config.js

@@ -40,6 +40,9 @@ const config = {
     }
   },
   markdown: {
+	toc: {
+		includeLevel: [2, 3]
+	},
     slugify(str) {
       if (typeof str !== 'string') return ''
 

docs/component/_sidebar.md

@@ -76,7 +76,7 @@
   * [uni-combox 组合框](component/uniui/uni-combox.md)
   * [uni-countdown 倒计时](component/uniui/uni-countdown.md)
   * [uni-data-checkbox 数据选择器](component/uniui/uni-data-checkbox.md)
-  * [uni-data-picker 数据驱动的picker选择器](component/uniui/uni-data-picker.md)
+  * [uni-data-picker 级联选择器](component/uniui/uni-data-picker.md)
   * [uni-dateformat 日期格式化](component/uniui/uni-dateformat.md)
   * [uni-datetime-picker 日期选择器](component/uniui/uni-datetime-picker.md)
   * [uni-drawer 抽屉](component/uniui/uni-drawer.md)

docs/component/uniui/uni-badge.md

 
-
-> **组件名：uni-badge**
+::: tip 组件名：uni-badge
 > 代码块： `uBadge`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-badge)
 
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-badge)
+:::
+
+数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景。
 
-数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
+## 介绍
 
 ### 基本用法
 
@@ -16,14 +17,16 @@
 <uni-badge size="small" :text="100" absolute="rightBottom" type="primary">
 	<button type="default">右下</button>
 </uni-badge>
+
 <uni-badge text="1"></uni-badge>
+
 <uni-badge text="2" type="purple" @click="bindClick"></uni-badge>
+
 <uni-badge text="3" type="primary" :inverted="true"></uni-badge>
 
 ```
 
-
-## API
+## 属性/方法
 
 ### Badge Props
 
@@ -45,6 +48,130 @@
 |:-:|:-:|:-:|
 |@click	|点击 Badge 触发事件| -|
 
-## 组件示例
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)
\ No newline at end of file
+
+## 示例
+::: danger 注意
+直接拷贝示例代码，无法运行 ，示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-badge) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+:::preview https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge
+
+```html
+<template>
+	<view class="container">
+		<uni-card is-full :is-shadow="false">
+			<text class="uni-h6">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
+		</uni-card>
+		<uni-section title="基础用法" type="line" padding>
+			<view class="example-body">
+				<uni-badge class="uni-badge-left-margin" text="1" />
+				<uni-badge class="uni-badge-left-margin" text="2" type="primary" />
+				<uni-badge class="uni-badge-left-margin" text="34" type="success" />
+				<uni-badge class="uni-badge-left-margin" text="45" type="warning" />
+				<uni-badge class="uni-badge-left-margin" text="123" type="info" />
+			</view>
+		</uni-section>
+		<uni-section title="无底色" type="line" padding>
+			<view class="example-body">
+				<uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
+				<uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
+				<uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
+				<uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
+				<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
+			</view>
+		</uni-section>
+
+		<uni-section title="自定义样式" type="line" padding>
+			<view class="example-body">
+				<uni-badge class="uni-badge-left-margin" text="2" type="primary"
+					:customStyle="{background: '#4335d6'}" />
+				<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="customStyle" />
+			</view>
+		</uni-section>
+
+		<uni-section title="定位: aboslute 属性" subTitle="注：在安卓端不支持 nvue" type="line" padding>
+				<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small">
+					<view class="box"><text class="box-text">右上</text></view>
+				</uni-badge>
+		</uni-section>
+
+		<uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
+			<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" :offset="[-3, -3]" size="small">
+				<view class="box"><text class="box-text">右上</text></view>
+			</uni-badge>
+		</uni-section>
+		<uni-section title="仅显示点: is-dot 属性" type="line" padding>
+			<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop" size="small">
+				<view class="box"><text class="box-text">圆点</text></view>
+			</uni-badge>
+		</uni-section>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				value: 0,
+				customStyle: {
+					backgroundColor: '#62ed0d',
+					color: '#fff'
+				}
+			};
+		},
+		mounted() {
+			const timer = setInterval(() => {
+				if (this.value >= 199) {
+					clearInterval(timer)
+					return
+				}
+				this.value++
+			}, 100)
+		}
+	};
+</script>
+
+<style lang="scss">
+	/* #ifdef MP-ALIPAY */
+	.uni-badge {
+		margin-left: 20rpx;
+	}
+
+	/* #endif */
+	.example-body {
+		flex-direction: row;
+		justify-content: flex-start;
+	}
+
+	.uni-badge-left-margin {
+		margin-left: 10px;
+	}
+
+	.uni-badge-absolute {
+		margin-left: 40px;
+	}
+
+	.box {
+		width: 40px;
+		height: 40px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		background-color: #DCDFE6;
+		color: #fff;
+		font-size: 12px;
+	}
+
+	.box-text {
+		text-align: center;
+		color: #fff;
+		font-size: 12px;
+	}
+</style>
+
+:::
+

docs/component/uniui/uni-calendar.md

-> **组件名：uni-calendar**
+
+
+:::tip 组件名：uni-calendar
 > 代码块： `uCalendar`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-calendar)
 
-日历组件
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-calendar)
+:::
 
-> **注意事项**
-> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)  
-> - 仅支持自定义组件模式
-> - `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
-> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
-> - 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
+日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等。
 
+## 介绍
+::: warning 注意事项
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+- 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)  
+- `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
+- 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
+- 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
+:::
 ### 基本用法
 
 在 ``template`` 中使用组件
@@ -63,6 +66,7 @@ export default {
 ```
 
 
+
 ## API
 
 ### Calendar Props
@@ -85,6 +89,146 @@ export default {
 |:-:|:-:|:-:|
 |open|弹出日历组件，`insert :false` 时生效|-|
 
-## 组件示例
+## 示例
+
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-calendar) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar
+> Template
+```vue
+<template>
+	<view class="calendar-content" v-if="showCalendar">
+		<text class="example-info">日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等。</text>
+		<uni-section title="插入模式" type="line"></uni-section>
+		<view>
+			<!-- 插入模式 -->
+			<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
+		</view>
+		<uni-section class="hideOnPc" title="弹出模式" type="line"></uni-section>
+		<view class="example-body hideOnPc">
+			<button class="calendar-button" type="button" @click="open">打开日历</button>
+		</view>
+		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
+		 :endDate="info.endDate" :range="info.range" @confirm="confirm" @close="close"/>
+	</view>
+</template>
+```
+> Script
+```vue
+<script>
+	/**
+	 * 获取任意时间
+	 */
+	function getDate(date, AddDayCount = 0) {
+		if (!date) {
+			date = new Date()
+		}
+		if (typeof date !== 'object') {
+			date = date.replace(/-/g, '/')
+		}
+		const dd = new Date(date)
+
+		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+
+		const y = dd.getFullYear()
+		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+		return {
+			fullDate: y + '-' + m + '-' + d,
+			year: y,
+			month: m,
+			date: d,
+			day: dd.getDay()
+		}
+	}
+	export default {
+		components: {},
+		data() {
+			return {
+				showCalendar: false,
+				info: {
+					lunar: true,
+					range: true,
+					insert: false,
+					selected: []
+				}
+			}
+		},
+		onReady() {
+			this.$nextTick(() => {
+				this.showCalendar = true
+			})
+			// TODO 模拟请求异步同步数据
+			setTimeout(() => {
+				this.info.date = getDate(new Date(),-30).fullDate
+				this.info.startDate = getDate(new Date(),-60).fullDate
+				this.info.endDate =  getDate(new Date(),30).fullDate
+				this.info.selected = [{
+						date: getDate(new Date(),-3).fullDate,
+						info: '打卡'
+					},
+					{
+						date: getDate(new Date(),-2).fullDate,
+						info: '签到',
+						data: {
+							custom: '自定义信息',
+							name: '自定义消息头'
+						}
+					},
+					{
+						date: getDate(new Date(),-1).fullDate,
+						info: '已打卡'
+					}
+				]
+			}, 2000)
+		},
+		methods: {
+			open() {
+				this.$refs.calendar.open()
+			},
+			close(){
+				console.log('弹窗关闭');
+			},
+			change(e) {
+				console.log('change 返回:', e)
+				// 模拟动态打卡
+				if (this.info.selected.length > 5) return
+				this.info.selected.push({
+					date: e.fulldate,
+					info: '打卡'
+				})
+			},
+			confirm(e) {
+				console.log('confirm 返回:', e)
+			},
+			monthSwitch(e) {
+				console.log('monthSwitchs 返回:', e)
+			}
+		}
+	}
+</script>
+```
+> Style
+```vue
+<style lang="scss">
+	.example-body {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+	.calendar-button {
+		flex: 1;
+		font-weight: bold;
+		font-size: 32rpx;
+	}
+</style>
+
+```
+:::
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)
\ No newline at end of file

docs/component/uniui/uni-card.md

-> **组件名：uni-card**
-> 代码块： `uCard`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-card)
 
-卡片视图组件。
 
-> **注意事项**
-> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 因为平台兼容问题 ， 目前 APP-NVUE 安卓平台下不支持阴影
-> - **1.2.1 版本有较大改动 ，更新组件请注意组件兼容问题**
+::: tip 组件名：uni-card
+> 代码块： `uCard`
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-card)
+:::
 
+卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。
 
+## 介绍
+::: warning 注意事项
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+- 因为平台兼容问题 ， 目前 APP-NVUE 安卓平台下不支持阴影
+- **1.2.1 版本有较大改动 ，更新组件请注意组件兼容问题**
+:::
 ### 基本用法
 
 ```html
@@ -77,6 +80,8 @@
 </uni-card>
 ```
 
+
+
 ## API
 
 ### Card Props
@@ -116,6 +121,215 @@
 |header[弃用]|卡片头部插槽（ 图文卡片 mode="style" 时，不支持）|
 |footer[弃用]|卡片底部插槽 |
 
-## 组件示例
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/card/card](https://hellouniapp.dcloud.net.cn/pages/extUI/card/card)
\ No newline at end of file
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-card) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/card/card
+> template
+```vue
+<template>
+	<view class="container">
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</text>
+		</uni-card>
+		<uni-section title="基础卡片" type="line">
+			<uni-card :is-shadow="false">
+				<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
+			</uni-card>
+		</uni-section>
+		<uni-section title="卡片标题+额外信息" type="line">
+			<uni-card title="基础卡片" extra="额外信息">
+				<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
+			</uni-card>
+		</uni-section>
+
+		<uni-section title="双标题卡片" type="line" >
+			<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick">
+				<text class="uni-body">这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
+			</uni-card>
+		</uni-section>
+
+		<uni-section title="通栏卡片" type="line">
+			<uni-card title="基础卡片" :isFull="true" sub-title="副标题" extra="额外信息" :thumbnail="avatar">
+				<text class="uni-body">这是一个通栏卡片 ，通栏没有外边距，左右会贴合父元素。</text>
+			</uni-card>
+		</uni-section>
+
+		<uni-section title="卡片封面图+操作栏" type="line">
+			<uni-card :cover="cover" @click="onClick">
+				<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
+				<text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
+				<view slot="actions" class="card-actions">
+					<view class="card-actions-item" @click="actionsClick('分享')">
+						<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
+						<text class="card-actions-item-text">分享</text>
+					</view>
+					<view class="card-actions-item" @click="actionsClick('点赞')">
+						<uni-icons type="heart" size="18" color="#999"></uni-icons>
+						<text class="card-actions-item-text">点赞</text>
+					</view>
+					<view class="card-actions-item" @click="actionsClick('评论')">
+						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
+						<text class="card-actions-item-text">评论</text>
+					</view>
+				</view>
+			</uni-card>
+		</uni-section>
+
+		<uni-section title="自定义卡片内容" type="line">
+			<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0" :thumbnail="avatar" >
+				<template v-slot:title>
+					<uni-list>
+						<uni-list-item :show-switch="true" title="自定义标题"/>
+					</uni-list>
+				</template>
+				<image style="width: 100%;" :src="cover"></image>
+				<text class="uni-body uni-mt-5">卡片组件通用来显示完整独立的一段信息，同时让用户理解他的作用。例如一篇文章的预览图、作者信息、时间等，卡片通常是更复杂和更详细信息的入口点。</text>
+				<view slot="actions" class="card-actions">
+					<view class="card-actions-item" @click="actionsClick('分享')">
+						<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
+						<text class="card-actions-item-text">分享</text>
+					</view>
+					<view class="card-actions-item" @click="actionsClick('点赞')">
+						<uni-icons type="heart" size="18" color="#999"></uni-icons>
+						<text class="card-actions-item-text">点赞</text>
+					</view>
+					<view class="card-actions-item" @click="actionsClick('评论')">
+						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
+						<text class="card-actions-item-text">评论</text>
+					</view>
+				</view>
+			</uni-card>
+		</uni-section>
+
+		<uni-section title="卡片+列表" type="line">
+			<uni-card padding="0" spacing="0">
+				<template v-slot:cover>
+					<view class="custom-cover">
+						<image class="cover-image" mode="aspectFill" :src="cover">
+						</image>
+						<view class="cover-content">
+							<text class="uni-subtitle uni-white">今日新闻热点</text>
+						</view>
+					</view>
+				</template>
+				<uni-list>
+					<uni-list-item title="今日新闻" showArrow></uni-list-item>
+					<uni-list-item title="今日新闻" showArrow></uni-list-item>
+				</uni-list>
+				<view slot="actions" class="card-actions no-border">
+					<view class="card-actions-item" @click="actionsClick('分享')">
+						<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
+						<text class="card-actions-item-text">分享</text>
+					</view>
+					<view class="card-actions-item" @click="actionsClick('点赞')">
+						<uni-icons type="heart" size="18" color="#999"></uni-icons>
+						<text class="card-actions-item-text">点赞</text>
+					</view>
+					<view class="card-actions-item" @click="actionsClick('评论')">
+						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
+						<text class="card-actions-item-text">评论</text>
+					</view>
+				</view>
+			</uni-card>
+		</uni-section>
+
+
+	</view>
+</template>
+```
+> script
+```vue
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
+				avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
+				extraIcon:{
+					color: '#4cd964',
+					size: '22',
+					type: 'gear-filled'
+				}
+			}
+		},
+		methods: {
+			onClick(e){
+				console.log(e)
+			},
+			actionsClick(text){
+				uni.showToast({
+					title:text,
+					icon:'none'
+				})
+			}
+		}
+	}
+</script>
+```
+
+```vue
+<style lang="scss">
+
+	.container {
+		overflow: hidden;
+	}
+
+	.custom-cover {
+		flex: 1;
+		flex-direction: row;
+		position: relative;
+	}
+
+	.cover-content {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 40px;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding-left: 15px;
+		font-size: 14px;
+		color: #fff;
+	}
+
+	.card-actions {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		align-items: center;
+		height: 45px;
+		border-top: 1px #eee solid;
+	}
+	.card-actions-item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+	.card-actions-item-text {
+		font-size: 12px;
+		color: #666;
+		margin-left: 5px;
+	}
+	.cover-image {
+		flex: 1;
+		height: 150px;
+	}
+	.no-border {
+		border-width: 0;
+	}
+</style>
+
+```
+:::
+
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/card/card)
\ No newline at end of file

docs/component/uniui/uni-collapse.md

-> **组件名：uni-collapse**
+
+
+::: tip 组件名：uni-collapse
 > 代码块： `uCollapse`
-> 关联组件：`uni-collapse-item`、`uni-icons`。
 > 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-collapse)
+> 关联组件：`uni-collapse-item`、`uni-icons`。
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-collapse)
+:::
 
 折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。
 
-> **注意事项**
+## 介绍
+::: warning 注意事项
 > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 组件需要依赖 `sass` 插件 ，请自行手动安装
-> - `App` 端默认关闭组件动画 ，因为 `height` 动画开销比较大，会导致页面卡顿，请酌情使用动画
-> - 如在使用组件过程从发现卡顿严重，请尝试停用组件动画，问题原因如上
-> - 在小程序端组件内容发生变化，需要手动调用 resize() 方法，手动更新几点信息，避免出现内容错位
-> - 如需自定义组件默认边框颜色等，请使用插槽自定义内容并合理使用 `border ` 和 `title-border` 属性
-> - 折叠面板仅支持嵌套使用，请勿单独使用
-> - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` 
-
+- 组件需要依赖 `sass` 插件 ，请自行手动安装
+- `App` 端默认关闭组件动画 ，因为 `height` 动画开销比较大，会导致页面卡顿，请酌情使用动画
+- 如在使用组件过程从发现卡顿严重，请尝试停用组件动画，问题原因如上
+- 在小程序端组件内容发生变化，需要手动调用 resize() 方法，手动更新几点信息，避免出现内容错位
+- 如需自定义组件默认边框颜色等，请使用插槽自定义内容并合理使用 `border ` 和 `title-border` 属性
+- uni-collapse-item 仅支持嵌套使用，请勿单独使用
+- 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` 
+:::
 ### 基本用法
 
 使用 `title` 属性指定面板显示内容 
@@ -71,6 +76,9 @@
 - 如果 `accordion` 属性为 `false` 则 `v-model` 类型为 `Array`
 - 请注意 `v-model` 属性与 `open` 属性请勿一起使用 ，建议只使用 `v-model`
 
+
+::: preview
+> Template
 ```html
 <uni-collapse v-model="value">
 	<uni-collapse-item name="key1" title="默认开启">
@@ -84,8 +92,9 @@
 	</uni-collapse-item>
 </uni-collapse>
 ```
+> Script
 
-```javascript
+```js
 export default {
 	data(){
 		return {
@@ -97,6 +106,8 @@ export default {
 }
 ```
 
+:::
+
 ### 使用动画
 
 使用 `show-animation` 属性开启或关闭面板折叠动画，默认动画开启
@@ -163,6 +174,8 @@ export default {
 - 在折叠面板组件中使用list时，在 App-Nvue 下请勿单独使用 uni-list-item，会导致组件无法正常显示，其他平台不做限制
 - 在默认插槽里使用 uni-list 组件与上方示例一样，直接写在默认插槽里即可
 
+
+
 ## API
 
 ### Collapse Props
@@ -184,53 +197,65 @@ export default {
 |:-:|:-:|
 |resize	|更新当前列表高度|
 
-> **提示**
-> - resize 方法解决动态添加数据，带动画的折叠面板高度不更新的问题
-> - 需要在数据渲染完毕之后使用 `resize` 方法。推荐在 `this.$nextTick()` 中使用
-> - 当前只有小程序端需要调用此方法，H5\App 端已经做了处理，不需要手动更新高度
-> ```html
-> 	<view>
-> 		<uni-collapse ref="collapse" v-model="value">
-> 			<uni-collapse-item title="默认开启" >
-> 				<view class="content">
-> 					<text class="text">{{content}}</text>
-> 				</view>
-> 			</uni-collapse-item>
-> 			<uni-collapse-item title="折叠内容">
-> 				<view class="content">
-> 					<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
-> 				</view>
-> 			</uni-collapse-item>
-> 		</uni-collapse>
-> 		<button class="button" type="primary" @click="add">动态修改内容</button>
-> 	</view>
-> ```
-> ```javascript
-> export default {
-> 	data() {
-> 		return {
-> 			value:['0'],
-> 			content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
-> 		}
-> 	},
-> 	methods: {
-> 		add() {
-> 			if (this.content.length > 35) {
-> 				this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
-> 			} else {
-> 				this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
-> 			}
-> 			// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
-> 			// #ifdef MP
-> 			this.$nextTick(() => {
-> 				this.$refs.collapse.resize()
-> 			})
-> 			// #endif
-> 		}
-> 	}
-> }
-> ```
 
+::: warning 提示
+- resize 方法解决动态添加数据，带动画的折叠面板高度不更新的问题
+- 需要在数据渲染完毕之后使用 `resize` 方法。推荐在 `this.$nextTick()` 中使用
+- 当前只有小程序端需要调用此方法，H5\App 端已经做了处理，不需要手动更新高度
+:::
+
+**示例：**
+::: preview
+> Template
+```vue
+<template>
+	<view>
+		<uni-collapse ref="collapse" v-model="value">
+			<uni-collapse-item title="默认开启" >
+				<view class="content">
+					<text class="text">{{content}}</text>
+				</view>
+			</uni-collapse-item>
+			<uni-collapse-item title="折叠内容">
+				<view class="content">
+					<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
+				</view>
+			</uni-collapse-item>
+		</uni-collapse>
+		<button class="button" type="primary" @click="add">动态修改内容</button>
+	</view>
+</template>
+
+```
+> Script
+```vue
+<script>
+	export default {
+		data() {
+			return {
+				value:['0'],
+				content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
+			}
+		},
+		methods: {
+			add() {
+				if (this.content.length > 35) {
+					this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
+				} else {
+					this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
+				}
+				// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
+				// #ifdef MP
+				this.$nextTick(() => {
+					this.$refs.collapse.resize()
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+```
+:::
 
 ### CollapseItem Props
 
@@ -260,6 +285,195 @@ export default {
 |default|默认插槽|
 |title|面板标题插槽，如使用此插槽禁用样式效果将失效|
 
-## 组件示例
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse](https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse)
\ No newline at end of file
+
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-collapse) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse
+> Template
+```vue
+<template>
+	<view>
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。</text>
+		</uni-card>
+		<uni-section title="基础用法" type="line">
+			<uni-collapse ref="collapse" v-model="value" @change="change">
+				<uni-collapse-item title="默认开启" >
+					<view class="content">
+						<text class="text">{{content}}</text>
+					</view>
+				</uni-collapse-item>
+				<uni-collapse-item title="折叠内容">
+					<view class="content">
+						<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
+					</view>
+				</uni-collapse-item>
+				<uni-collapse-item title="禁用状态" disabled>
+					<view class="content">
+						<text class="text">禁用状态内容主体，页面上是看不到这段话的。</text>
+					</view>
+				</uni-collapse-item>
+			</uni-collapse>
+		</uni-section>
+
+		<button class="button" type="primary" @click="add">动态修改内容</button>
+		<!-- TODO app 端默认不使用动画，app在使用高度动画的时候会有性能开销问题，所以应该要酌情使用 -->
+		<uni-section title="使用动画效果" type="line">
+			<uni-collapse >
+				<uni-collapse-item title="使用动画" :show-animation="true">
+					<view class="content">
+						<text class="text">默认开启组件动画，使用动画效果折叠内容会有一个从上到下的动画。</text>
+					</view>
+				</uni-collapse-item>
+				<uni-collapse-item title="不使用动画" :show-animation="false">
+					<view class="content">
+						<text class="text">设置 show-animation="false",关闭当前组件动画效果。</text>
+					</view>
+				</uni-collapse-item>
+			</uni-collapse>
+		</uni-section>
+		<uni-section title="手风琴效果（只会保留一个的打开状态）" type="line">
+			<uni-collapse  accordion v-model="accordionVal" @change="change">
+				<uni-collapse-item title="手风琴效果">
+					<view class="content">
+						<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
+					</view>
+				</uni-collapse-item>
+				<uni-collapse-item title="手风琴效果">
+					<view class="content">
+						<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
+					</view>
+				</uni-collapse-item>
+				<uni-collapse-item title="手风琴效果">
+					<view class="content">
+						<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
+					</view>
+				</uni-collapse-item>
+			</uni-collapse>
+		</uni-section>
+
+		<uni-section title="配置图片" type="line">
+			<uni-collapse>
+				<uni-collapse-item title="标题文字"
+					thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
+					<view class="content">
+						<text class="text">折叠内容主体，可自定义内容及样式</text>
+					</view>
+				</uni-collapse-item>
+				<uni-collapse-item title="标题文字"
+					thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
+					<view class="content">
+						<text class="text">折叠内容主体，可自定义内容及样式</text>
+					</view>
+				</uni-collapse-item>
+			</uni-collapse>
+		</uni-section>
+
+		<uni-section title="使用插槽" type="line">
+			<uni-collapse>
+				<uni-collapse-item titleBorder="none">
+					<template v-slot:title>
+						<uni-list>
+							<uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon">
+							</uni-list-item>
+						</uni-list>
+					</template>
+					<view class="content">
+						<text class="text">折叠内容主体，可自定义内容及样式</text>
+					</view>
+				</uni-collapse-item>
+				<uni-collapse-item title="折叠内容使用 uni-list 组件">
+					<uni-list>
+						<uni-list-item title="列表文字"></uni-list-item>
+						<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
+						<uni-list-item title="列表右侧显示 switch" :show-switch="true"></uni-list-item>
+						<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon" title="列表左侧带扩展图标"></uni-list-item>
+						<uni-list-item title="列表左侧带略缩图" note="列表描述信息"
+							thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
+							thumb-size="lg" rightText="右侧文字" showArrow></uni-list-item>
+						<uni-list-item title="开启点击反馈" clickable showArrow @click="onClick"></uni-list-item>
+					</uni-list>
+				</uni-collapse-item>
+			</uni-collapse>
+		</uni-section>
+	</view>
+</template>
+```
+> Script
+```vue
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				value:['0'],
+				accordionVal:'1',
+				content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
+				extraIcon: {
+					color: '#4cd964',
+					size: '26',
+					type: 'image'
+				},
+			}
+		},
+		methods: {
+			add() {
+				if (this.content.length > 35) {
+					this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
+				} else {
+					this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
+				}
+				// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
+				// #ifdef MP
+				this.$nextTick(() => {
+					this.$refs.collapse.resize()
+				})
+				// #endif
+			},
+			onClick(e) {
+				uni.showToast({
+					title: '列表被点击'
+				})
+			},
+			change(e) {
+				console.log(e);
+			}
+		}
+	}
+</script>
+```
+> Style
+```vue
+<style lang="scss">
+	.example-body {
+		flex-direction: column;
+		flex: 1;
+	}
+
+	.content {
+		padding: 15px;
+	}
+
+	.text {
+		font-size: 14px;
+		color: #666;
+		line-height: 20px;
+	}
+
+	.button {
+		// margin-top: 10px;
+		margin: 10px;
+		margin-bottom: 0;
+	}
+</style>
+
+```
+:::
+
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse)

docs/component/uniui/uni-combox.md

-> **组件名：uni-combox**
+
+::: tip 组件名：uni-combox
 > 代码块： `uCombox`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-combox)
 
-组合框组件。
+ [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-combox)
+:::
+
+组合框组件，一般用于可以选择也可以输入的表单项。
 
-### 平台兼容性说明
 
-**暂不支持nvue**
 
+## 介绍
+::: danger 注意
+- 因 nvue 框架限制 ，组件暂不支持nvue
+:::
 ### 基本用法
 
 在 ``template`` 中使用组件
@@ -16,6 +20,7 @@
 <uni-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
 ```
 
+
 ## API
 
 ### Combox Props
@@ -35,10 +40,74 @@
 |:-:		|:-:					|:-:													|
 |@input	|combox输入事件	|返回combox值|
 
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-combox) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox
+> Template
+```vue
+<template>
+	<view class="container">
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">组合框一般用于可以选择也可以输入的表单项。</text>
+		</uni-card>
+		<uni-section title="基本用法" type="line">
+			<view class="example-body">
+				<uni-combox :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
+				<view class="result-box">
+					<text>所选城市为：{{city}}</text>
+				</view>
+			</view>
+		</uni-section>
+
+		<uni-section title="无边框" subTitle="使用 border = false 取消边框" type="line">
+			<view class="example-body">
+				<uni-combox :border="false" :candidates="candidates" placeholder="请选择所在城市"></uni-combox>
+			</view>
+		</uni-section>
+
+		<uni-section title="设置无匹配项时的提示语" subTitle="使用 emptyTips 属性设置无匹配项时的提示语" type="line">
+			<view class="example-body">
+				<uni-combox emptyTips="这里啥都没有" placeholder="请选择所在城市"></uni-combox>
+			</view>
+		</uni-section>
+	</view>
+</template>
+```
+> Script
+```vue
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				candidates: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口'],
+				city: ''
+			}
+		}
+	}
+</script>
+```
+> Style
+```vue
+<style lang="scss">
+	.example-body {
+		padding: 12px;
+		background-color: #FFFFFF;
+	}
+
+	.result-box {
+		text-align: center;
+		padding: 20px 0px;
+		font-size: 16px;
+	}
+</style>
 
+```
+:::
 
-
-
-## 组件示例
-
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox](https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox)

docs/component/uniui/uni-countdown.md

-> **组件名：uni-countdown**
+
+
+::: tip 组件名：uni-countdown
 > 代码块： `uCountDown`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-countdown)
+ 
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-countdown)
+:::
 
 倒计时组件。
 
+
+## 介绍
 ### 基本用法
 
 在 ``template`` 中使用组件
@@ -20,6 +25,8 @@
 <uni-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :day="1" :hour="2" :minute="30" :second="0"></uni-countdown>
 ```
 
+
+
 ## API
 
 ### Countdown Props 
@@ -55,6 +62,89 @@
 
 
 
-## 组件示例
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-countdown) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown
+> Template
+```vue
+<template>
+	<view class="container">
+		<uni-card is-full>
+			<text class="uni-h6">倒计时组件主要用于促销商品剩余时间，发送短信验证等待时间等场景</text>
+		</uni-card>
+		 <uni-section title="一般用法" type="line" padding>
+			<uni-countdown :day="1" :hour="1" :minute="12" :second="40" />
+		</uni-section>
+		<uni-section title="不显示天数" subTitle="设置 show-day = false 不显示天" type="line" padding>
+			<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" />
+		</uni-section>
+		<uni-section title="文字分隔符" subTitle="设置 show-colon 属性设置分隔符样式" type="line" padding>
+			<uni-countdown :minute="30" :second="0" :show-colon="false" />
+		</uni-section>
+		<uni-section title="修改颜色" subTitle="设置 color \ background 属性设置组件颜色" type="line" padding>
+			<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
+		</uni-section>
+		<uni-section title="修改字体大小" subTitle="设置 font-size 属性设置组件大小" type="line" padding>
+			<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" />
+		</uni-section>
+		<uni-section title="修改颜色 + 字体大小" type="line" padding>
+			<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
+		</uni-section>
+		<uni-section title="自由控制开始/暂停" subTitle="设置 start 属性控制是否自动开启" type="line" padding>
+			<uni-countdown :start="start" :day="1" :hour="1" :minute="12" :second="40" />
+		</uni-section>
+		<uni-section title="倒计时回调事件" type="line" padding>
+			<uni-countdown :show-day="false" :second="timeupSecond" @timeup="timeup" />
+		</uni-section>
+		<uni-section title="动态赋值" type="line" padding>
+			<uni-countdown  :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" />
+		</uni-section>
+	</view>
+</template>
+```
+> Script
+```vue
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				testHour: 1,
+				testMinute: 0,
+				testSecond: 0,
+				start: false,
+				timeupSecond: 10
+			}
+		},
+		mounted() {
+			setTimeout(() => {
+				this.testHour = 1
+				this.testMinute = 1
+				this.testSecond = 0
+				this.start = true
+			}, 3000)
+			setTimeout(() => {
+				this.start = false
+			}, 10000)
+		},
+		methods: {
+			timeup() {
+				uni.showToast({
+					title: '时间到'
+				})
+				this.timeupSecond = 29
+			}
+		}
+	}
+</script>
+
+```
+:::
+
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown)
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown](https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown)
\ No newline at end of file

docs/component/uniui/uni-data-checkbox.md

 
-> **组件名：uni-data-checkbox**
+::: tip 组件名：uni-data-checkbox
 > 代码块： `uDataCheckbox`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-data-checkbox)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-data-checkbox)
+:::
 
 本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
 
@@ -13,12 +14,17 @@
 
 在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
 
-> **注意事项**
+
+## 介绍
+
+::: warning 注意事项
 > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 组件需要依赖 `sass` 插件 ，请自行手动安装
-> - 本组件为数据驱动，目的是快速投入使用，只可通过 style 覆盖有限样式，不支持自定义更多样式
-> - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` 
-> - 如组件显示有问题 ，请升级 `HBuilderX` 为 `v3.1.0` 以上
+- 组件需要依赖 `sass` 插件 ，请自行手动安装
+- 本组件为数据驱动，目的是快速投入使用，只可通过 style 覆盖有限样式，不支持自定义更多样式
+- 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` 
+- 如组件显示有问题 ，请升级 `HBuilderX` 为 `v3.1.0` 以上
+:::
+
 
 ### 基本用法
 
@@ -26,30 +32,28 @@
 
 需要注意 `:multiple="false"` 时（单选） ， `value/v-model` 的值是 `String|Number` 类型
 
-```html
+
+```vue
 <template>
 	<view>
 		<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
 	</view>
 </template>
-
-```
-
-```javascript
-
-export default {
-	data() { 
-		return {
-			value: 0,
-			range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
-		}
-	},
-	methods: {
-		change(e){
-			console.log('e:',e);
+<script>
+	export default {
+		data() { 
+			return {
+				value: 0,
+				range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
+			}
+		},
+		methods: {
+			change(e){
+				console.log('e:',e);
+			}
 		}
 	}
-}
+</script>
 ```
 
 ### 多选框
@@ -58,30 +62,27 @@ export default {
 
 需要注意 `:multiple="true"` 时（多选） ， `value/v-model` 的值是 `Array` 类型
 
-```html
+```vue
 <template>
 	<view>
 		<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
 	</view>
 </template>
-
-```
-
-```javascript
-
-export default {
-	data() { 
-		return {
-			value: [0,2],
-			range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
-		}
-	},
-	methods: {
-		change(e){
-			console.log('e:',e);
+<script>
+	export default {
+		data() { 
+			return {
+				value: [0,2],
+				range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
+			}
+		},
+		methods: {
+			change(e){
+				console.log('e:',e);
+			}
 		}
 	}
-}
+</script>
 ```
 
 ### 设置最大最小值
@@ -92,107 +93,100 @@ export default {
 
 如果选中个数大于等于 `max` 属性设置的值，那么其他未选中内容将不可选
 
-```html
+```vue
 <template>
 	<view>
 		<uni-data-checkbox min="1" max="2" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
 	</view>
 </template>
-
-```
-
-```javascript
-
-export default {
-	data() { 
-		return {
-			value: [0,2],
-			range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
-		}
-	},
-	methods: {
-		change(e){
-			console.log('e:',e);
+<script>
+	export default {
+		data() { 
+			return {
+				value: [0,2],
+				range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
+			}
+		},
+		methods: {
+			change(e){
+				console.log('e:',e);
+			}
 		}
 	}
-}
+</script>
 ```
 
 ### 设置禁用
 
 如果需要禁用某项，需要在 `localdata` 属性的数据源中添加 `disable` 属性，而不是在组件中添加 `disable` 属性
 
-```html
+
+```vue
 <template>
 	<view>
 		<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
 	</view>
 </template>
 
-```
-
-```javascript
-
-export default {
-	data() { 
-		return {
-			value: 0,
-			range: [{
-					"value": 0,
-					"text": "篮球"
-				},
-				{
-					"value": 1,
-					"text": "足球",
-					// 禁用当前项
-					"disable":true
-				},
-				{
-					"value": 2,
-					"text": "游泳"
-				}
-			]
-		}
-	},
-	methods: {
-		change(e){
-			console.log('e:',e);
+<script>
+	export default {
+		data() { 
+			return {
+				value: 0,
+				range: [{
+						"value": 0,
+						"text": "篮球"
+					},
+					{
+						"value": 1,
+						"text": "足球",
+						// 禁用当前项
+						"disable":true
+					},
+					{
+						"value": 2,
+						"text": "游泳"
+					}
+				]
+			}
+		},
+		methods: {
+			change(e){
+				console.log('e:',e);
+			}
 		}
 	}
-}
+</script>
 ```
 
-
 ### 自定义选中颜色
 
 设置 `selectedColor` 属性，可以修改组件选中后的图标及边框颜色
 
 设置 `selectedTextColor` 属性，可以修改组件选中后的文字颜色，如不填写默认同 `selectedColor` 属性 ，`mode` 属性为 `tag` 时，默认为白色
 
-```html
+```vue
 <template>
 	<view>
 		<uni-data-checkbox　selectedColor＝"red" selectedTextColor="red" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
 	</view>
 </template>
 
-```
-
-```javascript
-
-export default {
-	data() { 
-		return {
-			value: [0,2],
-			range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
-		}
-	},
-	methods: {
-		change(e){
-			console.log('e:',e);
+<script>
+	export default {
+		data() { 
+			return {
+				value: [0,2],
+				range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
+			}
+		},
+		methods: {
+			change(e){
+				console.log('e:',e);
+			}
 		}
 	}
-}
+</script>
 ```
 
 ### 更多模式
@@ -201,7 +195,7 @@ export default {
 
 如果需要禁用某项，需要在 `localdata` 属性的数据源中添加 `disable` 属性，而不是在组件中添加 `disable` 属性
 
-```html
+```vue
 <template>
 	<view>
 		<!-- 默认 default -->
@@ -217,23 +211,21 @@ export default {
 	</view>
 </template>
 
-```
-
-```javascript
-
-export default {
-	data() { 
-		return {
-			value: 0,
-			range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
-		}
-	},
-	methods: {
-		change(e){
-			console.log('e:',e);
+<script>
+	export default {
+		data() { 
+			return {
+				value: 0,
+				range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
+			}
+		},
+		methods: {
+			change(e){
+				console.log('e:',e);
+			}
 		}
 	}
-}
+</script>
 ```
 
 
@@ -241,50 +233,223 @@ export default {
 
 ### DataCheckbox Props
 
-| 属性名			| 类型							|可选值									| 默认值| 说明																													|
-| :-:					| :-:								|:-:										|:-:		| :-:																														|
-|value/v-model|Array/String/Number|-											|-			|默认值，multiple=true时为 Array类型，否则为 String或Number类型	|
-|localdata		|Array							|-											|-			|本地渲染数据，												|
-|mode					| String						|default/list/button/tag|default|显示模式			|
-|multiple			|Boolean						|-											|false	|是否多选		|
-|min					|String/Number			|-											|-			|最小选择个数 ，multiple为true时生效		|
-|max					|String/Number			|-											|-			|最大选择个数 ，multiple为true时生效		|
-|wrap					|Boolean						|-											|-			|是否换行显示				|
-|icon					|String							|left/right							|left		|list 列表模式下 icon 显示的位置	|
-|selectedColor|String							|-											|#007aff|选中颜色|
-|selectedTextColor|String					|-											|#333		|选中文本颜色，如不填写则自动显示|
-|emptyText 	|String					|-											|暂无数据		|没有数据时显示的文字 ，本地数据无效|
-|map 				|Object					|-											|{text:'text',value:'value'}		|字段映射，将text/value映射到数据中的其他字段|
+| 属性名| 类型|可选值| 默认值| 说明																													|
+| :-:| :-:|:-:|:-:| :-:|
+|value/v-model|Array/String/Number|-|-|默认值，multiple=true时为 Array类型，否则为 String或Number类型|
+|localdata|Array|-|-|本地渲染数据|
+|mode| String|default/list/button/tag|default|显示模式|
+|multiple|Boolean|-|false	|是否多选		|
+|min|String/Number|-|-|最小选择个数 ，multiple为true时生效|
+|max|String/Number|-|-|最大选择个数 ，multiple为true时生效|
+|wrap|Boolean|-|-|是否换行显示|
+|icon|String|left/right|left|list 列表模式下 icon 显示的位置|
+|selectedColor|String|-|#007aff|选中颜色|
+|selectedTextColor|String|-|#333|选中文本颜色，如不填写则自动显示|
+|emptyText 	|String|-|暂无数据|没有数据时显示的文字 ，本地数据无效|
+|map|Object|-|{text:'text',value:'value'}|字段映射，将text/value映射到数据中的其他字段|
 
 #### Localdata Options
 
 `localdata` 属性的格式为数组，数组内每项是对象，需要严格遵循如下格式
 
-|属性名		| 说明				|
-|:-:			| :-:				|
-|text			|显示文本			|
-|value		|选中后的值		|
-|disable	|是否禁用			|
+|属性名| 说明|
+|:-:| :-:|
+|text|显示文本|
+|value|选中后的值|
+|disable|是否禁用|
 
 #### Mode Options 
 
-|属性名		| 说明							|
-|:-:			| :-:							|
-|default	|默认值，横向显示		|
-|list			|列表							|
-|button		|按钮							|
-|tag			|标签							|
+|属性名| 说明|
+|:-:| :-:|
+|default|默认值，横向显示|
+|list|列表|
+|button|按钮|
+|tag|标签|
 
 
 ### DataCheckbox Events
 
-| 事件名	| 事件说明								| 返回参数|
-| :-:		| :-:									| :-:			|
-| @change| 选中状态改变时触发事件	| -				|
-
+| 事件名	| 事件说明| 返回参数|
+| :-:| :-:| :-:|
+| @change| 选中状态改变时触发事件	| -|
+
+
+
+
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-data-checkbox) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox
+> Template
+``` vue
+<template>
+	<view>
+		<uni-card is-full>
+			<text class="uni-h6">通过数据驱动的单选框和复选框，可直接通过连接 uniCloud 获取数据，同时可以配合表单组件 uni-forms 使用</text>
+		</uni-card>
+		<uni-section title="单选" type="line">
+			<view class="uni-px-5 uni-pb-5">
+				<view class="text">单选选中：{{JSON.stringify(radio1)}}</view>
+				<uni-data-checkbox v-model="radio1" :localdata="sex"></uni-data-checkbox>
+			</view>
+		</uni-section>
+		<uni-section title="多选" subTitle="使用multiple属性开启多选" type="line">
+			<view class="uni-px-5 uni-pb-5">
+				<view class="text">多选选中：{{JSON.stringify(checkbox1)}}</view>
+				<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
+			</view>
+		</uni-section>
+
+		<uni-section title="最大最小值" subTitle="使用 min / max 设置多选的最大最小值,单选无效">
+			<view class="uni-px-5 uni-pb-5">
+				<view class="text">选中：{{JSON.stringify(checkbox6)}}</view>
+				<uni-data-checkbox min="1" max="2" multiple v-model="checkbox6" :localdata="hobby"></uni-data-checkbox>
+			</view>
+		</uni-section>
+
+		<uni-section title="更多样式 - button" subTitle="使用mode=button属性使用按钮样式" type="line">
+			<view class="uni-px-5">
+				<view class="text">单选选中：{{JSON.stringify(radio2)}}</view>
+				<uni-data-checkbox mode="button" v-model="radio2" :localdata="sex"></uni-data-checkbox>
+			</view>
+			<view class="uni-px-5 uni-pb-5">
+				<view class="text">多选选中：{{JSON.stringify(checkbox2)}}</view>
+				<uni-data-checkbox mode="button" multiple v-model="checkbox2" :localdata="hobby"></uni-data-checkbox>
+			</view>
+		</uni-section>
+
+		<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
+			<view class="uni-px-5">
+				<view class="text">单选选中：{{JSON.stringify(radio3)}}</view>
+				<uni-data-checkbox mode="tag" v-model="radio3" :localdata="sex"></uni-data-checkbox>
+			</view>
+			<view class="uni-px-5 uni-pb-5">
+				<view class="text">多选选中：{{JSON.stringify(checkbox3)}}</view>
+				<uni-data-checkbox mode="tag" multiple v-model="checkbox3" :localdata="hobby"></uni-data-checkbox>
+			</view>
+		</uni-section>
+
+		<uni-section title="禁用" subTitle="数据中使用 disable 属性实现单独禁用,组件使用 disable 属性实现全部禁用" type="line">
+			<view class="uni-px-5">
+				<view class="text">单选选中：{{JSON.stringify(radio4)}}</view>
+				<uni-data-checkbox mode="button" v-model="radio4" :localdata="sex1"></uni-data-checkbox>
+			</view>
+			<view class="uni-px-5 uni-pb-5">
+				<view class="text">多选选中：{{JSON.stringify(checkbox4)}}</view>
+				<uni-data-checkbox mode="button" multiple v-model="checkbox4" :localdata="hobby2">
+				</uni-data-checkbox>
+			</view>
+		</uni-section>
+
+
+
+		<uni-section title="自定义高亮颜色" subTitle="使用 selectedColor 属性修改颜色" type="line">
+			<view class="uni-px-5">
+				<view class="text">单选选中：{{JSON.stringify(radio5)}}</view>
+				<uni-data-checkbox selectedColor="red" v-model="radio5" :localdata="sex1"></uni-data-checkbox>
+			</view>
+			<view class="uni-px-5 uni-pb-5">
+				<view class="text">多选选中：{{JSON.stringify(checkbox5)}}</view>
+				<uni-data-checkbox selectedColor="red" multiple v-model="checkbox5" :localdata="hobby2">
+				</uni-data-checkbox>
+			</view>
+		</uni-section>
+	
+	</view>
+</template>
+``` 
+
+> Script
+``` vue
+<script>
+	export default {
+		data() {
+			return {
+				radio1: 0,
+				radio2: 0,
+				radio3: 0,
+				radio4: 0,
+				radio5: 0,
+				radio6: 0,
+				checkbox1: [0],
+				checkbox2: [0],
+				checkbox3: [0],
+				checkbox4: [0],
+				checkbox5: [0],
+				checkbox6: [0],
+				sex: [{
+					text: '男',
+					value: 0
+				}, {
+					text: '女',
+					value: 1
+				}, {
+					text: '未知',
+					value: 2
+				}],
+				sex1: [{
+					text: '男',
+					value: 0
+				}, {
+					text: '女',
+					value: 1,
+					disable: true
+				}, {
+					text: '未知',
+					value: 2
+				}],
+				hobby: [{
+					text: '足球',
+					value: 0
+				}, {
+					text: '篮球',
+					value: 1
+				}, {
+					text: '游泳',
+					value: 2
+				}],
+				hobby2: [{
+					text: '足球',
+					value: 0,
+					disable: true
+				}, {
+					text: '篮球',
+					value: 1,
+					disable: true
+				}, {
+					text: '游泳',
+					value: 2
+				}],
+			}
+		}
+	}
+</script>
+``` 
+> Style
+``` vue
+<style lang="scss">
+	.text {
+		font-size: 12px;
+		color: #666;
+		margin-top: 5px;
+	}
+	.uni-px-5 {
+	    padding-left: 10px;
+	    padding-right: 10px;
+	}
+	.uni-pb-5 {
+	    padding-bottom: 10px;
+	}
+</style>
 
+```
 
+:::
 
-## 组件示例
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox)
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox](https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox)
\ No newline at end of file

docs/component/uniui/uni-data-picker.md

-> **组件名：uni-data-picker**
+
+::: tip 组件名：uni-data-picker
 > 代码块： `uDataPicker`
 > 关联组件：`uni-data-pickerview`、`uni-load-more`。
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-data-picker)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-data-picker)
+:::
+
 
 `<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。
 
@@ -19,80 +22,21 @@
 在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
 
 
-> **注意事项**
-> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 组件需要依赖 `sass` 插件 ，请自行手动安装
-> - `<uni-data-picker>` 内部包含了弹出层组件 `<uni-data-pickerview>` 外层的布局可能会影响弹出层，[详情](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Common_CSS_Questions)
-
-## API
-
-### DataPicker Props
-
-|属性名								| 类型						|	可选值 		 | 		默认值			| 说明|
-|:-:									| :-:						|:-:				 | :-:					| :-:	|
-|v-model 							|String/ Number	| -				 	 |	-						|绑定数据|
-|spaceInfo            |Object         |            |              |服务空间配置，[详情](https://uniapp.dcloud.net.cn/uniCloud/init)|
-|localdata						|Array					| 					 |							|数据，[详情](https://gitee.com/dcloud/datacom)|
-|preload 							|Boolean				| true/false |	false				|预加载数据|
-|readonly 						|Boolean				| true/false |	false				|是否禁用|
-|clear-icon 					|Boolean				| true/false |	true				|是否显示清除按钮|
-|ellipsis 						|Boolean				| true/false |	true				|是否隐藏 tab 标签过长的文本|
-|step-searh 					|Boolean				| true/false |	true				|分步查询时，点击节点请求数据|
-|step-search-url			|String					| 					 |							|分步查询时，动态加载云端数据url格式，`https://xxx.com/{parentValue}`(当前版本暂不支持，下版支持)|
-|self-field						|String					| 					 |							|分步查询时当前字段名称|
-|parent-field					|String					| 					 |							|分步查询时父字段名称|
-|collection						|String					| 					 |							|表名。支持输入多个表名，用 `,` 分割|
-|field								|String					| 					 |							|查询字段，多个字段用 `,` 分割|
-|where								|String					| 					 |							|查询条件，内容较多，另见jql文档：[详情](https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=jsquery)|
-|orderby							|String					| 					 |							|排序字段及正序倒叙设置|
-|popup-title					|String					| 					 |							|弹出层标题|
-|map									|Object					|						 |{text:'text',value:'value'}|字段映射，将text/value映射到数据中的其他字段|
-
-> ****
-> `collection/where/orderby` 和 `<unicloud-db>` 的用法一致，[详情](https://uniapp.dcloud.net.cn/uniCloud/unicloud-db)
-
-
-
-### DataPicker Events
-
-|事件称名					| 类型						| 说明																						|
-|:-:							| :-:						|	:-:																						|
-|@change 					|EventHandle		|	选择完成时触发 {detail: {value}}								|
-|@nodeclick				|EventHandle		| 节点被点击时触发																|
-|@stepsearch			|EventHandle		| 动态加载节点数据前触发(当前版本暂不支持，下版支持)	|
-|@popupopened			|EventHandle		| 弹出层弹出时触发																|
-|@popupclosed			|EventHandle		| 弹出层关闭时触发																|
-
-### DataPicker Methods
-
-|方法称名	|说明|参数|
-|:-:|:-:|:-:|
-|show|打开弹出层|-|
-|hide|关闭弹出层|-|
-|clear|清除已选项|-|
-
-**使用方法：**
-```js
-this.$refs.picker.show() // `picker` 为组件的 ref 名称
-```
-
-### DataPicker Slots
+## 介绍
 
-|名称|说明|					
-|:-:|:-:|						
-|default|覆盖显示框内容|
-
-
-### 基本用法
+::: warning 注意事项
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+- 组件需要依赖 `sass` 插件 ，请自行手动安装
+- `<uni-data-picker>` 内部包含了弹出层组件 `<uni-data-pickerview>` 外层的布局可能会影响弹出层，[详情](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Common_CSS_Questions)
+- 云端数据需要关联服务空间
+- 下面示例中使用的表 `opendb-city-china`(中国城市省市区数据，含港澳台), 在[uniCloud控制台](https://unicloud.dcloud.net.cn/)使用opendb创建，[详情](https://gitee.com/dcloud/opendb)
+:::
 
-#### 云端数据
 
-> **注意事项**
-> - 云端数据需要关联服务空间
-> - 下面示例中使用的表 `opendb-city-china`(中国城市省市区数据，含港澳台), 在[uniCloud控制台](https://unicloud.dcloud.net.cn/)使用opendb创建，[详情](https://gitee.com/dcloud/opendb)
 
+### 云端数据
 
-```html
+```vue
 <template>
   <view>
     <uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code"
@@ -100,9 +44,6 @@ this.$refs.picker.show() // `picker` 为组件的 ref 名称
     </uni-data-picker>
   </view>
 </template>
-```
-
-```js
 <script>
   export default {
     data() {
@@ -124,17 +65,15 @@ this.$refs.picker.show() // `picker` 为组件的 ref 名称
 
 
 
-#### 本地数据
+### 本地数据
 
-```html
+```vue
 <template>
   <view>
     <uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
   </view>
 </template>
-```
 
-```js
 <script>
   export default {
     data() {
@@ -176,7 +115,7 @@ this.$refs.picker.show() // `picker` 为组件的 ref 名称
 ```
 
 
-#### 自定义solt
+### 自定义 Solt
 
 ```html
 <uni-data-picker v-slot:default="{data, error, options}" popup-title="请选择所在地区">
@@ -199,80 +138,174 @@ this.$refs.picker.show() // `picker` 为组件的 ref 名称
 > `localdata` 和 `collection` 同时配置时，`localdata` 优先
 
 
+## API
+
+### DataPicker Props
 
-#### 完整示例
+|属性名| 类型|可选值|默认值| 说明|
+|:-:| :-:|:-:| :-:| :-:	|
+|v-model|String/ Number	| -|-|绑定数据|
+|spaceInfo|Object|-|-|服务空间配置，[详情](https://uniapp.dcloud.net.cn/uniCloud/init)|
+|localdata|Array|-|-|数据，[详情](https://gitee.com/dcloud/datacom)|
+|preload|Boolean| true/false |false|预加载数据|
+|readonly|Boolean| true/false |	false|是否禁用|
+|clear-icon|Boolean| true/false |true|是否显示清除按钮|
+|ellipsis|Boolean| true/false |	true|是否隐藏 tab 标签过长的文本|
+|step-searh|Boolean| true/false |true|分步查询时，点击节点请求数据|
+|step-search-url|String|-|-|分步查询时，动态加载云端数据url格式，`https://xxx.com/{parentValue}`(当前版本暂不支持，下版支持)|
+|self-field|String|-|-|分步查询时当前字段名称|
+|parent-field|String|-|-|分步查询时父字段名称|
+|collection|String|-|-|表名。支持输入多个表名，用 `,` 分割|
+|field|String|-|-|查询字段，多个字段用 `,` 分割|
+|where|String|-|-|查询条件，内容较多，另见jql文档：[详情](https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=jsquery)|
+|orderby|String|-|-|排序字段及正序倒叙设置|
+|popup-title|String|||弹出层标题|
+|map|Object|-|{text:'text',value:'value'}|字段映射，将text/value映射到数据中的其他字段|
+
+::: warning 注意
+`collection/where/orderby` 和 `<unicloud-db>` 的用法一致，[详情](https://uniapp.dcloud.net.cn/uniCloud/unicloud-db)
+:::
 
-```html
+
+
+### DataPicker Events
+
+|事件称名| 类型| 说明|
+|:-:| :-:|	:-:|
+|@change|EventHandle|选择完成时触发 {detail: {value}}|
+|@nodeclick|EventHandle| 节点被点击时触发|
+|@stepsearch|EventHandle| 动态加载节点数据前触发(当前版本暂不支持，下版支持)	|
+|@popupopened|EventHandle| 弹出层弹出时触发|
+|@popupclosed|EventHandle| 弹出层关闭时触发|
+
+### DataPicker Methods
+
+|方法称名	|说明|参数|
+|:-:|:-:|:-:|
+|show|打开弹出层|-|
+|hide|关闭弹出层|-|
+|clear|清除已选项|-|
+
+**使用方法：**
+```js
+this.$refs.picker.show() // `picker` 为组件的 ref 名称
+```
+
+### DataPicker Slots
+
+|名称|说明|					
+|:-:|:-:|						
+|default|覆盖显示框内容|
+
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-data-picker) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/data-picker/data-picker
+> Template
+``` vue
 <template>
 	<view class="container">
-		<uni-data-picker @change="onchange" @nodeclick="onnodeclick" @stepsearch="onstepsearch" @popupopened="onpopupopened"
-		 @popupclosed="onpopupclosed">
-		</uni-data-picker>
+		<uni-card is-full :is-shadow="false">
+			<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
+		</uni-card>
+		<uni-section title="本地数据" type="line" padding style="height: calc(100vh - 100px);">
+			<uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
+				@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
+			</uni-data-picker>
+		</uni-section>
 	</view>
 </template>
-```
-
-```js
+``` 
+> Script
+``` vue
 <script>
 	export default {
 		data() {
 			return {
-				count: 1
+				classes: '1-2',
+				dataTree: [{
+					text: "一年级",
+					value: "1-0",
+					children: [{
+						text: "1.1班",
+						value: "1-1"
+					},
+					{
+						text: "1.2班",
+						value: "1-2"
+					}]
+				},
+				{
+					text: "二年级",
+					value: "2-0",
+					children: [{
+						text: "2.1班",
+						value: "2-1"
+					},
+					{
+						text: "2.2班",
+						value: "2-2"
+					}]
+				},
+				{
+					text: "三年级",
+					value: "3-0",
+					disable: true
+				}]
 			}
 		},
 		methods: {
-			onchange(e) {
-				const value = e.detail.value
+			onnodeclick(e) {
+				console.log(e);
 			},
-			onnodeclick(node) {
-				// node 当前点击节点
+			onpopupopened(e) {
+				console.log('popupopened');
 			},
-			onstepsearch(node, resolve) {
-				if (node.level === 0) {
-					return resolve([{
-						text: 'region1',
-						value: 'region1'
-					}, {
-						text: 'region2',
-						value: 'region1'
-					}]);
-				}
-
-				var hasChild;
-				if (node.text === 'region1') {
-					hasChild = true;
-				} else if (node.text === 'region2') {
-					hasChild = false;
-				} else {
-					hasChild = Math.random() > 0.5;
-				}
-
-				setTimeout(() => {
-					var data;
-					if (hasChild) {
-						data = [{
-							text: 'zone' + this.count++,
-							value: 'zone' + this.count++
-						}, {
-							text: 'zone' + this.count++,
-							value: 'zone' + this.count++
-						}];
-					} else {
-						data = [];
-					}
-
-					resolve(data);
-				}, 500);
+			onpopupclosed(e) {
+				console.log('popupclosed');
 			},
-			onpopupopened() {},
-			onpopupclosed() {}
+			onchange(e) {
+				console.log('onchange:', e);
+			}
 		}
 	}
 </script>
+``` 
+> Style
+``` vue
+<style>
+	.title {
+		font-size: 14px;
+		font-weight: bold;
+		margin: 20px 0 5px 0;
+	}
 
-```
+	.data-pickerview {
+		height: 400px;
+		border: 1px #e5e5e5 solid;
+	}
 
+	 .popper__arrow {
+    top: -6px;
+    left: 50%;
+    margin-right: 3px;
+    border-top-width: 0;
+    border-bottom-color: #EBEEF5;
+}
+ .popper__arrow {
+    top: -6px;
+    left: 50%;
+    margin-right: 3px;
+    border-top-width: 0;
+    border-bottom-color: #EBEEF5;
+}
+</style>
 
-## 组件示例
+```
+:::
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/data-picker/data-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/data-picker/data-picker)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/data-picker/data-picker)
\ No newline at end of file

docs/component/uniui/uni-dateformat.md

 
-
-> **组件名：uni-dateformat**
+::: tip 组件名：uni-dateformat
 > 代码块： `uDateformat`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-dateformat)
+ 
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-dateformat)
+:::
 
 日期格式化组件。
 
+## 介绍
 ### 基本用法
 
 在 ``template`` 中使用组件
@@ -66,6 +67,68 @@ format接收字符以及含义如下：
 
 
 
-## 组件示例
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat](https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat)
\ No newline at end of file
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-dateformat) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat
+> Template
+``` vue
+<template>
+	<view>
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">日期格式化组件，通常用于需要展示友好的日期格式的场景。</text>
+		</uni-card>
+		<uni-section title="基础用法" type="line" padding>
+			<view class="example-body">
+				<uni-dateformat :date="now - 7200000"></uni-dateformat>
+				<uni-dateformat date="2020/12/12"></uni-dateformat>
+			</view>
+		</uni-section>
+		<uni-section title="设置阈值" subTitle="阈值用于控制什么时候显示刚刚|马上，什么时候显示xx分钟前|xx分钟后" type="line" padding>
+			<view class="example-body">
+				<uni-dateformat :date="now - 30000" :threshold="[0,3600000]"></uni-dateformat>
+				<uni-dateformat :date="now - 30000" :threshold="[0,0]"></uni-dateformat>
+			</view>
+		</uni-section>
+		<uni-section title="使用英文" type="line" padding>
+			<view class="example-body">
+				<uni-dateformat :date="now - 1200000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
+				<uni-dateformat :date="now - 30000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
+				<uni-dateformat :date="now - 80000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
+			</view>
+		</uni-section>
+	</view>
+</template>
+``` 
+> Script
+``` vue
+<script>
+	export default {
+		data() {
+			return {
+				now: Date.now()
+			}
+		}
+	}
+</script>
+``` 
+> Style
+``` vue
+<style lang="scss">
+	.example-body {
+		display: flex;
+		flex-direction: column;
+		line-height: 1.5em;
+	}
+</style>
+
+```
+:::
+
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat)
+

docs/component/uniui/uni-datetime-picker.md

 
+::: danger 重要通知
+组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护
+:::
 
-> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
-
-
-> **组件名：uni-datetime-picker**
+::: tip 组件名：uni-datetime-picker
 > 代码块： `uDatetimePicker`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-datetime-picker)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-datetime-picker)
+:::
 
 该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
 
@@ -17,9 +18,9 @@
 - 若设置初始值 value, 会显示在 picker 显示框中
 - 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
 
-### 基本用法
 
-在 `template` 中使用组件
+## 介绍
+### 基本用法
 
 ```html
 <template>
@@ -184,6 +185,127 @@
 |default|会覆盖输入框|
 
 
-## 组件示例
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker)
\ No newline at end of file
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-datetime-picker) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker
+> Template
+``` html
+<template>
+	<view class="page container">
+		<uni-card is-full>
+			<text class="uni-h6">可以同时选择日期和时间的选择器</text>
+		</uni-card>
+		<uni-section :title="'日期用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
+		</view>
+		<uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
+		</view>
+		<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
+		</view>
+		<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
+		</view>
+		<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single" />
+		</view>
+		<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker returnType="timestamp" v-model="single" @change="changeLog($event)" />
+		</view>
+		<uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker type="datetime" returnType="date" v-model="datetimesingle" @change="changeLog" />
+		</view>
+		<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
+		</view>
+		<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single" :border="false" />
+		</view>
+		<uni-section :title="'隐藏清除按钮用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single" :clearIcon="false" />
+		</view>
+		<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single" disabled />
+		</view>
+	</view>
+</template>
+``` 
+> Script
+``` html
+<script>
+	export default {
+		data() {
+			return {
+				single: '',
+				datetimesingle: '',
+				range: ['2021-02-1', '2021-3-28'],
+				datetimerange: [],
+				start: Date.now() - 1000000000,
+				end: Date.now() + 1000000000
+			}
+		},
+
+		watch: {
+			datetimesingle(newval) {
+				console.log('单选:', this.datetimesingle);
+			},
+			range(newval) {
+				console.log('范围选:', this.range);
+			},
+			datetimerange(newval) {
+				console.log('范围选:', this.datetimerange);
+			}
+		},
+		mounted() {
+			setTimeout(() => {
+				this.datetimesingle = Date.now() - 2*24*3600*1000
+				this.single = '2021-2-12'
+				this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"]
+			},3000)
+		},
+
+		methods:{
+			change(e) {
+				this.single = e
+				console.log('change事件:', this.single = e);
+			},
+			changeLog(e) {
+				console.log('change事件:', e);
+			},
+			maskClick(e){
+				console.log('maskClick事件:', e);
+			}
+		}
+	}
+</script>
+``` 
+> Style
+``` html
+<style lang="scss">
+	.example-body {
+		background-color: #fff;
+		padding: 10px;
+	}
+</style>
+```
+:::
+
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker)
\ No newline at end of file

docs/component/uniui/uni-drawer.md

 
-
-> **组件名：uni-drawer**
+::: tip 组件名：uni-drawer
 > 代码块： `uDrawer`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-drawer)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-drawer)
+:::
 
 抽屉侧滑菜单。
 
-> **注意事项**
-> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - `width` 属性仅在 `vue` 页面生效，`nvue` 页面因性能问题，不支持动态设置宽度，如需修改，请下载组件修改源码
 
+## 介绍
+::: warning 注意事项
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+- `width` 属性仅在 `vue` 页面生效，`nvue` 页面因性能问题，不支持动态设置宽度，如需修改，请下载组件修改源码
+:::
 ### 基本用法
 
-在 ``template`` 中使用组件
-
 ```html
 <template>
 	<view>
@@ -47,32 +47,168 @@
 
 ### Drawer Props
 
-|属性名			|类型	|默认值	|说明															|
-|:-:			|:-:	|:-:	|:-:															|
-|mask			|Boolean|true	|是否显示遮罩													|
-|maskClick		|Boolean|true	|点击遮罩是否可以关闭抽屉										|
-|mode			|String	|left	|Drawer滑出位置，可选值：left（从左侧滑出）， right（从右侧滑出）|
-|width			|Number	|220	|Drawer 宽度，仅vue页面设置生效									|
-
-
+|属性名|类型|默认值|说明|
+|:-:|:-:|:-:|:-:|
+|mask|Boolean|true|是否显示遮罩|
+|maskClick|Boolean|true	|点击遮罩是否可以关闭抽屉|
+|mode|String|left|Drawer滑出位置，可选值：left（从左侧滑出）， right（从右侧滑出）|
+|width|Number|220|Drawer 宽度，仅vue页面设置生效|
 
 
 ### Drawer Events
 
-|事件名	|说明				|返回值	|
-|:-:		|:-:				|:-:	|
-|@change|抽屉状态发生变化触发事件	|true：抽屉已经打开；false：抽屉已经关闭；	|
+|事件名|说明|返回值|
+|:-:|:-:|:-:	|
+|@change|抽屉状态发生变化触发事件|true：抽屉已经打开；false：抽屉已经关闭；	|
 
 ### Drawer Methods
 
-|方法称名	|说明		|参数|
-|:-:		|:-:		|:-:|
-|open		|打开抽屉	|-|
+|方法称名	|说明|参数|
+|:-:|:-:|:-:|
+|open|打开抽屉	|-|
 |close	|关闭抽屉	|-|
 
 
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-drawer) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer
+> Template
+``` html
+<template>
+	<view>
+		<uni-card is-full :is-shadow="false">
+			<text class="uni-h6">这是抽屉式导航组件使用示例，可以指定菜单左侧或者右侧弹出（仅初始化生效），组件内部可以放置任何内容。点击页面按钮即可显示导航菜单。</text>
+		</uni-card>
+
+		<uni-section title="左侧滑出" type="line">
+			<view class="example-body">
+				<button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text>
+				</button>
+				<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
+					<view class="close">
+						<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
+					</view>
+				</uni-drawer>
+			</view>
+		</uni-section>
+
+		<uni-section title="右侧滑出" type="line">
+			<view class="example-body">
+				<button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text>
+				</button>
+				<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
+					<view class="scroll-view">
+						<scroll-view class="scroll-view-box" scroll-y="true">
+							<view class="info">
+								<text class="info-text">右侧遮罩只能通过按钮关闭，不能通过点击遮罩关闭</text>
+							</view>
+							<view class="close">
+								<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
+							</view>
+							<view class="info-content" v-for="item in 100" :key="item">
+								<text>可滚动内容 {{item}}</text>
+							</view>
+							<view class="close">
+								<button  @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
+							</view>
+						</scroll-view>
+					</view>
+				</uni-drawer>
+			</view>
+		</uni-section>
+	</view>
+</template>
+``` 
+> Script
+``` html
+<script>
+	export default {
+		data() {
+			return {
+				showRight: false,
+				showLeft: false
+			}
+		},
+		methods: {
+			confirm() {},
+			// 打开窗口
+			showDrawer(e) {
+				this.$refs[e].open()
+			},
+			// 关闭窗口
+			closeDrawer(e) {
+				this.$refs[e].close()
+			},
+			// 抽屉状态发生变化触发
+			change(e, type) {
+				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
+				this[type] = e
+			}
+		},
+		onNavigationBarButtonTap(e) {
+			if (this.showLeft) {
+				this.$refs.showLeft.close()
+			} else {
+				this.$refs.showLeft.open()
+			}
+		},
+		// app端拦截返回事件 ，仅app端生效
+		onBackPress() {
+			if (this.showRight || this.showLeft) {
+				this.$refs.showLeft.close()
+				this.$refs.showRight.close()
+				return true
+			}
+		}
+	}
+</script>
 
+``` 
+> Style
+``` html
+<style lang="scss">
+.example-body {
+	padding: 10px;
+}
+.scroll-view {
+	/* #ifndef APP-NVUE */
+	width: 100%;
+	height: 100%;
+	/* #endif */
+	flex:1
+}
+// 处理抽屉内容滚动
+.scroll-view-box {
+	flex: 1;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+.info {
+	padding: 15px;
+	color: #666;
+}
+
+.info-text {
+	font-size: 14px;
+	color: #666;
+}
+.info-content {
+	padding: 5px 15px;
+}
+.close {
+	padding: 10px;
+}
+</style>
 
-## 组件示例
+```
+:::
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer](https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer)
\ No newline at end of file

docs/component/uniui/uni-easyinput.md

 
 
-> **组件名：uni-easyinput**
+::: tip 组件名：uni-easyinput
 > 代码块： `uEasyinput`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-easyinput)
 
-easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-easyinput)
+:::
+
 
+easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能
 
-> **注意事项**
-> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 组件需要依赖 `sass` 插件 ，请自行手动安装
+## 介绍
 
 ### 基本用法
 
@@ -130,8 +129,8 @@ easyinput 组件是对原生input组件的增强 ，是专门为配合表单组
 |属性名| 说明|
 |:-:| :-:|
 |text|文本输入键盘|
-|textarea	|多行文本输入键盘|
-|password	|密码输入键盘|
+|textarea|多行文本输入键盘|
+|password|密码输入键盘|
 |number|数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式	|
 |idcard|身份证输入键盘，仅支持微信、支付宝、百度、QQ小程序|
 |digit|带小数点的数字键盘，仅支持微信、支付宝、百度、头条、QQ小程序	|
@@ -140,22 +139,22 @@ easyinput 组件是对原生input组件的增强 ，是专门为配合表单组
 
 平台差异与 [input](https://uniapp.dcloud.io/component/input) 相同
 
-|属性名	| 说明|
+|属性名| 说明|
 |:-:| :-:|
-|send|右下角按钮为“发送”	|
-|search	|右下角按钮为“搜索”	|
+|send|右下角按钮为“发送”|
+|search	|右下角按钮为“搜索”|
 |next|右下角按钮为“下一个”|
 |go|右下角按钮为“前往”	|											
-|done|右下角按钮为“完成”	|
+|done|右下角按钮为“完成”|
 	
 
 #### Styles Options 
 	
 |属性名| 默认值 	|说明|
 |:-:| :-:| :-:|
-|color| #333|	输入文字颜色|
-|disableColor	|#eee|	输入框禁用背景色|
-|borderColor	|#e5e5e5	|	边框颜色|
+|color| #333|输入文字颜色|
+|disableColor|#eee|	输入框禁用背景色|
+|borderColor|#e5e5e5	|	边框颜色|
 
 #### Trim Options
 
@@ -181,6 +180,97 @@ easyinput 组件是对原生input组件的增强 ，是专门为配合表单组
 |@iconClick	|点击图标时触发| prefix/suffix	|
 
 
-## 组件示例
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-easyinput) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput
+> Template
+``` html
+<template>
+	<view>
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input所有功能</text>
+		</uni-card>
+		<uni-section title="默认" subTitle="使用 focus 属性自动获取输入框焦点" type="line" padding>
+			<uni-easyinput errorMessage v-model="value" focus placeholder="请输入内容" @input="input"></uni-easyinput>
+		</uni-section>
+
+		<uni-section title="去除空格" subTitle="使用 trim 属性 ,可以控制返回内容的空格 " type="line" padding>
+			<text class="uni-subtitle">输入内容：{{ '"'+value+'"' }}</text>
+			<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput>
+		</uni-section>
+
+		<uni-section title="自定义样式" subTitle="使用 styles 属性 ,可以自定义输入框样式" type="line" padding>
+			<uni-easyinput v-model="value" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入内容"@input="input"></uni-easyinput>
+		</uni-section>
+		<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" type="line" padding>
+			<uni-easyinput prefixIcon="search" v-model="value" placeholder="左侧图标" @iconClick="iconClick">
+			</uni-easyinput>
+			<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="右侧图标" @iconClick="iconClick"></uni-easyinput>
+		</uni-section>
+		<uni-section title="禁用" subTitle="使用 disabled 属性禁用输入框" type="line" padding>
+			<uni-easyinput disabled value="已禁用" placeholder="请输入内容"></uni-easyinput>
+		</uni-section>
+
+		<uni-section title="密码框" subTitle="指定属性 type=password 使用密码框,右侧会显示眼睛图标" type="line" padding>
+			<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
+		</uni-section>
+
+		<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
+			<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
+		</uni-section>
+
+		<uni-section title="多行文本自动高度" subTitle="使用属性 autoHeight 使多行文本框自动增高" type="line" padding>
+			<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
+		</uni-section>
+	</view>
+</template>
+``` 
+> Script
+``` html
+<script>
+	export default {
+		data() {
+			return {
+				value: '',
+				password: '',
+				placeholderStyle: "color:#2979FF;font-size:14px",
+				styles: {
+					color: '#2979FF',
+					borderColor: '#2979FF'
+				}
+			}
+
+		},
+		onLoad() {},
+		onReady() {},
+		methods: {
+			input(e) {
+				console.log('输入内容：', e);
+			},
+			iconClick(type) {
+				uni.showToast({
+					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
+					icon: 'none'
+				})
+			}
+		}
+	}
+</script>
+``` 
+> Ｓtyle
+``` html
+<style lang="scss">
+.uni-mt-5 {
+	margin-top: 5px;
+}
+</style>
+
+```
+:::
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput](https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput)
\ No newline at end of file

docs/component/uniui/uni-fab.md

 
-> **组件名：uni-fab**
+::: tip 组件名：uni-fab
 > 代码块： `uFab`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fab)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fab)
+:::
 
 点击可展开一个图形按钮菜单
 
-> **注意事项**
-> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 不建议动态修改属性，可能会耗损部分性能。
-> - 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。
-> - 选中状态要通过自己控制，如果不希望有选中状态，不处理 `active` 即可。 
-> - 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。
 
+## 介绍
+::: warning 注意事项
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+- 不建议动态修改属性，可能会耗损部分性能。
+- 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。
+- 选中状态要通过自己控制，如果不希望有选中状态，不处理 `active` 即可。 
+- 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。
+:::
 
 ### 基本用法
 
@@ -38,47 +41,185 @@
 
 ### Fab Props
 
-|  属性名	|    类型	| 默认值		| 说明															|
-| :-:		| :-:		| :-:			| :-:															|
-| pattern	| Object	| -				| 可选样式配置项												|
-| horizontal| String	| 'left'		| 水平对齐方式。`left`:左对齐，`right`：右对齐					|
-| vertical	| String	| 'bottom'		| 垂直对齐方式。`bottom`:下对齐，`top`：上对齐					|
-| direction	| String	| 'horizontal'	| 展开菜单显示方式。`horizontal`:水平显示，`vertical`：垂直显示	|
-| popMenu	| Boolean	| true			| 是否使用弹出菜单											|
-| content	| Array		| -				| 展开菜单内容配置项											|
+|属性名|类型| 默认值| 说明|
+|:-:| :-:| :-:| :-:|
+|pattern| Object| -| 可选样式配置项|
+|horizontal| String| 'left'| 水平对齐方式。`left`:左对齐，`right`：右对齐|
+|vertical| String| 'bottom'| 垂直对齐方式。`bottom`:下对齐，`top`：上对齐|
+|direction	| String| 'horizontal'| 展开菜单显示方式。`horizontal`:水平显示，`vertical`：垂直显示	|
+|popMenu| Boolean| true| 是否使用弹出菜单|
+|content| Array| -| 展开菜单内容配置项|
 
 
 
 **pattern配置项：**
 
-|  参数				|    类型	| 默认值	| 说明				|
-| :-:				|  :-:		| :-:		| :-:				|
-| color				| String	| #3c3e49	| 文字默认颜色		|
-| selectedColor		| String	| #007AFF	| 文字选中时的颜色	|
-| backgroundColor	| String	| #ffffff	| 背景色			|
-| buttonColor		| String	| #3c3e49	| 按钮背景色		|
+|参数|类型	| 默认值	|说明|
+|:-:|:-:| :-:| :-:|
+|color| String	| #3c3e49| 文字默认颜色|
+|selectedColor| String	| #007AFF| 文字选中时的颜色|
+|backgroundColor| String| #ffffff| 背景色|
+|buttonColor| String| #3c3e49| 按钮背景色|
 
 **content配置项：**
 
-|  参数				|    类型	| 说明			|
-| :-:				|  :-:				| :-:		| :-:			|
-| iconPath			| String	| 图片路径		|
-| selectedIconPath	| String	| 选中后图片路径|
-| text				| String	| 文字			|
-| active			| Boolean	| 是否选中当前	|
+|  参数|类型	| 说明|
+| :-:|  :-:| :-:| :-:|
+| iconPath| String| 图片路径|
+| selectedIconPath| String	| 选中后图片路径|
+| text| String	| 文字|
+| active| Boolean| 是否选中当前	|
 
 ### Fab Events
 
-|  参数		|    类型	| 说明							|
-| :-:		|  :-:		| :-:							|
+|  参数|类型| 说明|
+| :-:|  :-:| :-:|
 | @trigger	| Function	| 展开菜单点击事件，返回点击信息|
 | @fabClick	| Function	| 悬浮按钮点击事件				|
 
 
 
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-fab) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab
+> Template
+``` html
+<template>
+	<view class="container">
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">uni-ui 规范颜色色板，通过内置样式快速指定元素前景和背景色。</text>
+		</uni-card>
+
+		<uni-section title="基本功能" subTitle="点击按钮,切换 fab 不同状态" type="line">
+			<view class="warp">
+				<button class="button" type="primary" @click="switchBtn(0)">切换菜单方向({{ directionStr }})</button>
+				<button class="button" type="primary" @click="switchBtn('left', 'bottom')">左下角显示</button>
+				<button class="button" type="primary" @click="switchBtn('right', 'bottom')">右下角显示</button>
+				<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
+				<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
+				<button class="button" type="primary" @click="switchBtn('right', 'top')">右上角显示</button>
+				<button class="button" type="primary" @click="switchColor">修改颜色</button>
+			</view>
+		</uni-section>
+		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
+			:direction="direction" @trigger="trigger" @fabClick="fabClick" />
+	</view>
+</template>
+``` 
+
+> Script
+``` html
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				title: 'uni-fab',
+				directionStr: '垂直',
+				horizontal: 'left',
+				vertical: 'bottom',
+				direction: 'horizontal',
+				pattern: {
+					color: '#7A7E83',
+					backgroundColor: '#fff',
+					selectedColor: '#007AFF',
+					buttonColor: '#007AFF',
+					iconColor: '#fff'
+				},
+				is_color_type: false,
+				content: [{
+						iconPath: '/static/image.png',
+						selectedIconPath: '/static/image-active.png',
+						text: '相册',
+						active: false
+					},
+					{
+						iconPath: '/static/home.png',
+						selectedIconPath: '/static/home-active.png',
+						text: '首页',
+						active: false
+					},
+					{
+						iconPath: '/static/star.png',
+						selectedIconPath: '/static/star-active.png',
+						text: '收藏',
+						active: false
+					}
+				]
+			}
+		},
+		onBackPress() {
+			if (this.$refs.fab.isShow) {
+				this.$refs.fab.close()
+				return true
+			}
+			return false
+		},
+		methods: {
+			trigger(e) {
+				console.log(e)
+				this.content[e.index].active = !e.item.active
+				uni.showModal({
+					title: '提示',
+					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
+					success: function(res) {
+						if (res.confirm) {
+							console.log('用户点击确定')
+						} else if (res.cancel) {
+							console.log('用户点击取消')
+						}
+					}
+				})
+			},
+			fabClick() {
+				uni.showToast({
+					title: '点击了悬浮按钮',
+					icon: 'none'
+				})
+			},
+			switchBtn(hor, ver) {
+				if (hor === 0) {
+					this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
+					this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
+				} else {
+					this.horizontal = hor
+					this.vertical = ver
+				}
+				this.$forceUpdate()
+			},
+			switchColor() {
+				this.is_color_type = !this.is_color_type
+				if (this.is_color_type) {
+					this.pattern.iconColor = '#aaa'
+					this.pattern.buttonColor = '#fff'
+				} else {
+					this.pattern.iconColor = '#fff'
+					this.pattern.buttonColor = '#007AFF'
+				}
+			}
+		}
+	}
+</script>
+``` 
+> Style
+``` html
+<style lang="scss">
+	.warp {
+		padding: 10px;
+	}
+
+	.button {
+		margin-bottom: 10px;
+	}
+</style>
 
+```
+:::
 
 
-## 组件示例
-
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab](https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab)
\ No newline at end of file

docs/component/uniui/uni-fav.md

 
-> **组件名：uni-fav**
+::: tip 组件名：uni-fav
 > 代码块： `uFav`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fav)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-fav)
+:::
 
 用于收藏功能，可点击切换选中、不选中的状态。
 
+## 介绍
 ### 基本用法
-
-在 ``template`` 中使用组件
-
 ```html
 <uni-fav :checked="checked" @click="onClick"/>
 <uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
@@ -38,6 +37,116 @@
 |click		|点击 fav按钮 触发事件	|-		|
 
 
-## 组件示例
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav](https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav)
\ No newline at end of file
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-fav) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav
+> Template
+``` html
+<template>
+	<view class="container">
+		<uni-card is-full :is-shadow="false">
+			<text class="uni-h6">用于收藏功能，可点击切换选中、不选中的状态。</text>
+		</uni-card>
+		<uni-section title="基本用法" type="line">
+			<view class="example-body">
+				<uni-fav :checked="checkList[0]" class="favBtn" @click="favClick(0)" />
+				<uni-fav :checked="checkList[1]" :star="false" class="favBtn" @click="favClick(1)" />
+				<uni-fav :checked="checkList[2]" class="favBtn" :circle="true" bg-color="#dd524d"
+					bg-color-checked="#007aff" fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick(2)" />
+				<uni-fav :checked="checkList[3]" class="favBtn" bg-color="#f8f8f8" bg-color-checked="#eeeeee"
+					fg-color="#333333" fg-color-checked="#333333" @click="favClick(3)" />
+			</view>
+		</uni-section>
+
+		<uni-section title="自定义文字" type="line">
+			<view class="example-body">
+				<uni-fav :checked="checkList[4]" :content-text="contentText" @click="favClick(4)" />
+			</view>
+		</uni-section>
+
+		<uni-section title="在自定义导航栏使用" type="line">
+			<uni-nav-bar style="width: 100%;" :fixed="false" left-icon="arrowleft" title="标题" color="#333333"
+				background-color="#FFFFFF">
+				<template v-slot:right>
+					<uni-fav :checked="checkList[5]" :circle="true" @click="favClick(5)" />
+				</template>
+			</uni-nav-bar>
+		</uni-section>
+		<view class="example-body example-body-fullWidth">
+
+		</view>
+	</view>
+</template>
+``` 
+> Script
+``` html
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				checkList: [false, false, false, false, false, false],
+				contentText: {
+					contentDefault: '追番',
+					contentFav: '已追番'
+				}
+			}
+		},
+		methods: {
+			favClick(index) {
+				this.checkList[index] = !this.checkList[index]
+				console.log(this.checkList[index]);
+				this.$forceUpdate()
+			}
+		}
+	}
+</script>
+``` 
+> Style
+``` html
+<style lang="scss">
+	.example-body {
+		display: flex;
+		padding: 10px 15px;
+	}
+
+	/* #ifdef MP-ALIPAY */
+	.uni-fav {
+		margin-left: 20rpx;
+	}
+
+	/* #endif */
+
+
+	.favBtn {
+		margin: 0 20rpx 20rpx 0;
+	}
+
+
+	.example-body-fullWidth {
+		padding: 32rpx 0;
+	}
+
+	.example-body-first {
+		/* #ifndef APP-PLUS-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: flex-start;
+	}
+
+	.favBtn-nav {
+		// left:-50rpx;
+	}
+</style>
+
+```
+:::
+
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav)
\ No newline at end of file

docs/component/uniui/uni-file-picker.md

 
-> **组件名：uni-file-picker**
+::: tip 组件名：uni-file-picker
 >  代码块： `uFilePicker`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-file-picker)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-file-picker)
+::: 
 
 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
 
-> **注意事项**
+## 介绍 
+::: warning 注意事项
 > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 组件需要依赖 `sass` 插件 ，请自行手动安装
-> - 如不绑定服务空间，`autoUpload`默认为`false`且不可更改
-> - 选择文件目前只支持 `H5` 和 `微信小程序平台` ，且 `微信小程序平台` 使用 `wx.chooseMessageFile()`
-> - v-model 值需要自动上传成功后才会绑定值，一般只用来回显数据
+- 组件需要依赖 `sass` 插件 ，请自行手动安装
+- 如不绑定服务空间，`autoUpload`默认为`false`且不可更改
+- 选择文件目前只支持 `H5` 和 `微信小程序平台` ，且 `微信小程序平台` 使用 `wx.chooseMessageFile()`
+- v-model 值需要自动上传成功后才会绑定值，一般只用来回显数据
+:::
 
 ### 基础用法
 
@@ -25,10 +28,8 @@
 	@success="success" 
 	@fail="fail" 
 />
-```
-
-```javascript
-export default {
+<script>
+	export default {
 		data() {
 			return {
 				imageValue:[]
@@ -54,8 +55,8 @@ export default {
 				console.log('上传失败：',e)
 			}
 		}
-}
-
+	}
+</script>
 ```
 
 ### 选择指定后缀图片，且限制选择个数
@@ -88,21 +89,22 @@ export default {
 配置 `auto-upload` 属性为 `false` ，可以停止自动上传，通过`ref`调用`upload`方法自行选择上传时机
 
 ```html
-<view>
-	<uni-file-picker  ref="files" :auto-upload="false"/>
-	<button @click="upload">上传文件</button>
-</view>
-```
-
-```javascript
-export default {
+<template>
+	<view>
+		<uni-file-picker  ref="files" :auto-upload="false"/>
+		<button @click="upload">上传文件</button>
+	</view>
+</template>
+<script>
+	export default {
 		data() {},
 		methods:{
 			upload(){
 				this.$refs.files.upload()
 			}
 		}
-}
+	}
+</script>
 
 ```
 
@@ -131,14 +133,14 @@ export default {
 配置 `list-styles` 属性，可以自定义`mode:video|| mode:all`时的回显样式
 
 ```html
-<view>
-	<uni-file-picker fileMediatype="image" :image-styles="imageStyles"/>
-	<uni-file-picker fileMediatype="all" :list-styles="listStyles"/>
-</view>
-```
-
-```javascript
-export default {
+<template>
+	<view>
+		<uni-file-picker fileMediatype="image" :image-styles="imageStyles"/>
+		<uni-file-picker fileMediatype="all" :list-styles="listStyles"/>
+	</view>
+</template>
+<script>
+	export default {
 		data() {
 			imageStyles:{
 				width:64,
@@ -163,7 +165,8 @@ export default {
 				}
 			}
 		}
-}
+	}
+</script>
 
 ```
 
@@ -293,9 +296,132 @@ export default {
 |default|默认插槽|
 
 
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-file-picker) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker
+> Template
+``` html
+<template>
+	<view class="container">
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间。</text>
+		</uni-card>
+		<uni-section title="只选择图片" type="line">
+			<view class="example-body">
+				<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
+			</view>
+		</uni-section>
+		<uni-section title="只选择视频" type="line">
+			<view class="example-body">
+				<uni-file-picker limit="9" file-mediatype="video" title="最多选择9个视频"></uni-file-picker>
+			</view>
+		</uni-section>
+
+
+		<!-- #ifdef H5 || MP-WEIXIN -->
+		<uni-section title="选择任意文件" type="line">
+			<view class="example-body">
+				<uni-file-picker limit="5" file-mediatype="all" title="最多选择5个文件"></uni-file-picker>
+			</view>
+		</uni-section>
+		<!-- #endif -->
+
+		<uni-section title="自定义图片大小" type="line">
+			<view class="example-body custom-image-box">
+				<text class="text">选择头像</text>
+				<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
+					file-mediatype="image">选择</uni-file-picker>
+			</view>
+		</uni-section>
+
+		<uni-section title="自定义图片大小" type="line">
+			<view class="example-body ">
+				<uni-file-picker readonly :value="fileLists" :imageStyles="imageStyles" file-mediatype="image">
+				</uni-file-picker>
+				<uni-file-picker readonly :value="fileLists" :listStyles="listStyles" file-mediatype="all">
+				</uni-file-picker>
+			</view>
+		</uni-section>
+
+	</view>
+</template>
+``` 
+> Script
+``` html
+<script>
+	export default {
+		data() {
+			return {
+				imageStyles: {
+					width: 64,
+					height: 64,
+					border: {
+						radius: '50%'
+					}
+				},
+				listStyles: {
+					// 是否显示边框
+					border: true,
+					// 是否显示分隔线
+					dividline: true,
+					// 线条样式
+					borderStyle: {
+						width: 1,
+						color: 'blue',
+						style: 'dashed',
+						radius: 2
+					}
+				},
+				fileLists: [{
+					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
+					extname: 'png',
+					name: 'shuijiao.png'
+				}, {
+					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
+					extname: 'png',
+					name: 'uniapp-logo.png'
+				}, {
+					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
+					extname: 'png',
+					name: 'shuijiao.png'
+				}]
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+``` 
+> Style
+``` html
+<style lang="scss">
+	.example-body {
+		padding: 10px;
+		padding-top: 0;
+	}
+
+	.custom-image-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.text {
+		font-size: 14px;
+		color: #333;
+	}
+</style>
 
+```
+:::
 
-
-## 组件示例
-
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker)
\ No newline at end of file

docs/component/uniui/uni-forms.md

 
-> **组件名：uni-forms**
+::: tip 组件名：uni-forms
 > 代码块： `uForms`、`uni-forms-item`
 > 关联组件：`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-forms)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-forms)
+:::
 
 uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
 
@@ -17,14 +18,15 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
 
 另外，`<uni-forms>`组件下面的各个表单项，可以通过`<uni-group>`包裹为不同的分组。同一`<uni-group>`下的不同表单项目将聚拢在一起，同其他group保持垂直间距。`<uni-group>`仅影响视觉效果。
 
-> **注意事项**
+## 介绍
+::: warning 注意事项
 > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 组件需要依赖 `sass` 插件 ，请自行手动安装
-> - `resetFields` 方法不会重置原生组件和三方组件的值
-> - 如果配置 `validateTrigger` 属性为 `bind` 且表单域组件使用 `input` 事件触发会耗损部分性能，请谨慎使用
-> - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` 
-> - uni-forms 中不包含其他表单组件，如需使用 uni-easyinput、uni-data-checkbox 等组件，需要自行引入
-
+- 组件需要依赖 `sass` 插件 ，请自行手动安装
+- `resetFields` 方法不会重置原生组件和三方组件的值
+- 如果配置 `validateTrigger` 属性为 `bind` 且表单域组件使用 `input` 事件触发会耗损部分性能，请谨慎使用
+- 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` 
+- uni-forms 中不包含其他表单组件，如需使用 uni-easyinput、uni-data-checkbox 等组件，需要自行引入
+:::
 ### 基本用法 
 
 `uni-forms` 组件通常用来做表单校验和提交。每一个 `uni-forms-item` 是它的一个表单域组件，用来承载表单具体内容，`uni-forms-item` 中可以嵌套 `uni-easyinput`、`uni-data-checkbox` 和 uni-app内置的表单组件 ，不过 uni-app 的内置表单组件需要通过 `binddata` 或者 `uni-forms` 提供的 `setValue` 方法，将内容与 `uni-forms` 关联，才可完成表单的校验与提交（详见后文`表单校验` 部分）
@@ -109,6 +111,8 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
 
 **完整示例**
 
+::: preview 
+> Template
 ```html
 <template>
 	<view>
@@ -125,7 +129,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
 </template>
 			 
 ```
-
+> Script
 ```javascript
 export default {
 	data() {
@@ -180,11 +184,12 @@ export default {
 	}
 }
 ```
+:::
 
-> **注意**
-> `modelValue` 对象目前有比较严格的格式要求：
-> - 尽量不要使用嵌套的数据结构，因为表单域指定的`name`值与 modeValue 的 key 是一一对应的，只有一种情况例外，那就是动态校验表单，见下方`动态校验表单`章节
-
+::: danger 注意
+`modelValue` 对象目前有比较严格的格式要求：
+- 尽量不要使用嵌套的数据结构，因为表单域指定的`name`值与 modeValue 的 key 是一一对应的，只有一种情况例外，那就是动态校验表单，见下方`动态校验表单`章节
+:::
 
 ### 校验规则说明
 
@@ -258,11 +263,11 @@ rules: {
 |email|必须是 email 类型|
 
 
-> **pattern属性说明**
-> 在小程序中，json 中不能使用正则对象，如：`/^\S+?@\S+?\.\S+?$/`，使用正则对象会被微信序列化，导致正则失效。
-> 所以建议统一使用字符串的方式来使用正则 ，如`'^\\S+?@\\S+?\\.\\S+?$'` ，需要注意 `\` 需要使用 `\\` 来转译。
-> 如验证邮箱：/^\S+?@\S+?\.\S+?$/ （注意不带引号）,或使用 "^\\S+?@\\S+?\\.\\S+?$"（注意带引号需要使用 `\` 转义）		
-
+::: warning pattern属性说明
+- 在小程序中，json 中不能使用正则对象，如：`/^\S+?@\S+?\.\S+?$/`，使用正则对象会被微信序列化，导致正则失效。
+- 所以建议统一使用字符串的方式来使用正则 ，如`'^\\S+?@\\S+?\\.\\S+?$'` ，需要注意 `\` 需要使用 `\\` 来转译。
+- 如验证邮箱：/^\S+?@\S+?\.\S+?$/ （注意不带引号）,或使用 "^\\S+?@\\S+?\\.\\S+?$"（注意带引号需要使用 `\` 转义）		
+:::
 
 
 ### validateFunction 自定义校验规则使用说明
@@ -295,10 +300,7 @@ rules: {
 		<button class="button" @click="submit">校验表单</button>
 	</view>
 </template>
-
-```
-
-```javascript
+<script>
 export default {
 	data() {
 		return {
@@ -336,7 +338,7 @@ export default {
 		}
 	}
 }
-
+</script>
 ```
 
 
@@ -356,9 +358,7 @@ export default {
 	</view>
 </template>
 
-```
-
-```javascript
+<script>
 export default {
 	data() {
 		return {
@@ -411,7 +411,7 @@ export default {
 		}
 	}
 }
-
+</script>
 ```
 
 
@@ -467,8 +467,9 @@ dynamicFormData: {
 
 **完整示例**
 
+::: preview 
+> Template
 ```html
-
 <uni-forms ref="dynamicForm" :rules="dynamicRules" :modelValue="dynamicFormData">
 	<uni-forms-item label="邮箱" required name="email">
 		<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
@@ -491,7 +492,7 @@ dynamicFormData: {
 </view>
 
 ```
-
+> Script
 ```javascript
 export default {
 	data() {
@@ -549,10 +550,13 @@ export default {
 	}
 }
 ```
+:::
+
 
-**tips**
+::: tip 小提示
+如果需要给对象赋值，需要使用 this.$set() ，将当前对象加入到可观测对象中，否则组件内无法获取正确的值
+:::
 
-- 如果需要给对象赋值，需要使用 this.$set() ，将当前对象加入到可观测对象中，否则组件内无法获取正确的值
 
 ### 表单校验时机说明
 
@@ -651,10 +655,7 @@ export default {
 		</uni-forms>
 	</view>
 </template>
-
-```
-
-```javascript
+<script>
 export default {
 	data() {
 		return {
@@ -681,6 +682,7 @@ export default {
 		}
 	}
 }
+</script>
 
 ```
 
@@ -742,9 +744,7 @@ this.$refs.form.validate().then((res)=>{
 	</view>
 </template>
 
-```
-
-```javascript
+<script>
 export default {
 	data() {
 		return {
@@ -771,6 +771,7 @@ export default {
 		}
 	}
 }
+</script>
 
 ```
 
@@ -818,6 +819,345 @@ this.$refs.form.clearValidate(['name', 'email'])
 |left(已经失效，请使用label代替)|label插槽，自定义label显示内容|
 |label|label插槽，自定义label显示内容|
 
-## 组件示例
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/forms/forms](https://hellouniapp.dcloud.net.cn/pages/extUI/forms/forms)
\ No newline at end of file
+
+
+
+
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-forms) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/forms/forms
+> Template
+``` html
+<template>
+	<view class="container">
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
+		</uni-card>
+		<uni-section title="基本用法" type="line">
+			<view class="example">
+				<!-- 基础用法，不包含校验规则 -->
+				<uni-forms ref="baseForm" :modelValue="baseFormData">
+					<uni-forms-item label="姓名" required>
+						<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
+					</uni-forms-item>
+					<uni-forms-item label="年龄" required>
+						<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
+					</uni-forms-item>
+					<uni-forms-item label="性别" required>
+						<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
+					</uni-forms-item>
+					<uni-forms-item label="兴趣爱好" required>
+						<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
+					</uni-forms-item>
+					<uni-forms-item label="自我介绍">
+						<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
+					</uni-forms-item>
+					<uni-forms-item label="日期时间">
+						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/>
+					</uni-forms-item>
+				</uni-forms>
+			</view>
+		</uni-section>
+
+		<uni-section title="对齐方式" type="line">
+			<view class="example">
+				<view class="segmented-control">
+					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button">
+					</uni-segmented-control>
+				</view>
+				<!-- 展示不同的排列方式 -->
+				<uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment">
+					<uni-forms-item label="姓名" required>
+						<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
+					</uni-forms-item>
+					<uni-forms-item label="年龄" required>
+						<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
+					</uni-forms-item>
+				</uni-forms>
+			</view>
+		</uni-section>
+
+		<uni-section title="表单校验" type="line">
+			<view class="example">
+				<!-- 基础表单校验 -->
+				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
+					<uni-forms-item label="姓名" required name="name">
+						<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
+					</uni-forms-item>
+					<uni-forms-item label="年龄" required name="age">
+						<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
+					</uni-forms-item>
+					<uni-forms-item label="自我介绍" name="introduction">
+						<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
+					</uni-forms-item>
+				</uni-forms>
+				<button type="primary" @click="submit('valiForm')">提交</button>
+			</view>
+		</uni-section>
+
+		<uni-section title="自定义校验规则" type="line">
+			<view class="example">
+				<!-- 自定义表单校验 -->
+				<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
+					<uni-forms-item label="姓名" required name="name">
+						<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
+					</uni-forms-item>
+					<uni-forms-item label="年龄" required name="age">
+						<uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" />
+					</uni-forms-item>
+					<uni-forms-item label="兴趣爱好" required name="hobby">
+						<uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" />
+					</uni-forms-item>
+				</uni-forms>
+				<button type="primary" @click="submit('customForm')">提交</button>
+			</view>
+		</uni-section>
+
+
+		<uni-section title="动态表单" type="line">
+			<view class="example">
+				<!-- 动态表单校验 -->
+				<uni-forms ref="dynamicForm" :rules="dynamicRules" :modelValue="dynamicFormData">
+					<uni-forms-item label="邮箱" required name="email">
+						<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
+					</uni-forms-item>
+					<uni-forms-item v-for="(item,index) in dynamicLists" :key="item.id" :label="item.label+' '+index"
+						required :rules="item.rules" :name="'domains[' + item.id + ']'">
+						<view class="form-item">
+							<uni-easyinput v-model="dynamicFormData.domains[item.id]" placeholder="请输入域名" />
+							<button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
+						</view>
+					</uni-forms-item>
+				</uni-forms>
+				<view class="button-group">
+					<button type="primary" size="mini" @click="add">新增域名</button>
+					<button type="primary" size="mini" @click="submit('dynamicForm')">提交</button>
+				</view>
+			</view>
+		</uni-section>
+	</view>
+</template>
+``` 
+
+> Script
+``` html
+<script>
+	export default {
+		data() {
+			return {
+				// 基础表单数据
+				baseFormData: {
+					name: '',
+					age: '',
+					introduction: '',
+					sex: 2,
+					hobby: [5],
+					datetimesingle: 1627529992399
+				},
+				// 表单数据
+				alignmentFormData: {
+					name: '',
+					age: '',
+				},
+				// 单选数据源
+				sexs: [{
+					text: '男',
+					value: 0
+				}, {
+					text: '女',
+					value: 1
+				}, {
+					text: '保密',
+					value: 2
+				}],
+				// 多选数据源
+				hobbys: [{
+					text: '跑步',
+					value: 0
+				}, {
+					text: '游泳',
+					value: 1
+				}, {
+					text: '绘画',
+					value: 2
+				}, {
+					text: '足球',
+					value: 3
+				}, {
+					text: '篮球',
+					value: 4
+				}, {
+					text: '其他',
+					value: 5
+				}],
+				// 分段器数据
+				current: 0,
+				items: ['左对齐', '顶部对齐'],
+				// 校验表单数据
+				valiFormData: {
+					name: '',
+					age: '',
+					introduction: '',
+				},
+				// 校验规则
+				rules: {
+					name: {
+						rules: [{
+							required: true,
+							errorMessage: '姓名不能为空'
+						}]
+					},
+					age: {
+						rules: [{
+							required: true,
+							errorMessage: '年龄不能为空'
+						}, {
+							format: 'number',
+							errorMessage: '年龄只能输入数字'
+						}]
+					}
+				},
+				// 自定义表单数据
+				customFormData: {
+					name: '',
+					age: '',
+					hobby: []
+				},
+				// 自定义表单校验规则
+				customRules: {
+					name: {
+						rules: [{
+							required: true,
+							errorMessage: '姓名不能为空'
+						}]
+					},
+					age: {
+						rules: [{
+							required: true,
+							errorMessage: '年龄不能为空'
+						}]
+					},
+					hobby: {
+						rules: [{
+								format: 'array'
+							},
+							{
+								validateFunction: function(rule, value, data, callback) {
+									if (value.length < 2) {
+										callback('请至少勾选两个兴趣爱好')
+									}
+									return true
+								}
+							}
+						]
+					}
+
+				},
+				dynamicFormData: {
+					email: '',
+					domains: {}
+				},
+				dynamicLists: [],
+				dynamicRules: {
+					email: {
+						rules: [{
+							required: true,
+							errorMessage: '域名不能为空'
+						}, {
+							format: 'email',
+							errorMessage: '域名格式错误'
+						}]
+					}
+				}
+			}
+		},
+		computed: {
+			// 处理表单排列切换
+			alignment() {
+				if (this.current === 0) return 'left'
+				if (this.current === 1) return 'top'
+				return 'left'
+			}
+		},
+		onLoad() {},
+		onReady() {
+			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
+			this.$refs.customForm.setRules(this.customRules)
+		},
+		methods: {
+			onClickItem(e) {
+				console.log(e);
+				this.current = e.currentIndex
+			},
+			add() {
+				this.dynamicLists.push({
+					label: '域名',
+					rules: [{
+						'required': true,
+						errorMessage: '域名项必填'
+					}],
+					id: Date.now()
+				})
+			},
+			del(id) {
+				let index = this.dynamicLists.findIndex(v => v.id === id)
+				this.dynamicLists.splice(index, 1)
+			},
+			submit(ref) {
+				this.$refs[ref].validate().then(res => {
+					console.log('success', res);
+					uni.showToast({
+						title: `校验通过`
+					})
+				}).catch(err => {
+					console.log('err', err);
+				})
+			},
+		}
+	}
+</script>
+``` 
+> Style
+``` html
+<style lang="scss">
+
+	.example {
+		padding: 15px;
+		background-color: #fff;
+	}
+
+	.segmented-control {
+		margin-bottom: 15px;
+	}
+
+	.button-group {
+		margin-top: 15px;
+		display: flex;
+		justify-content: space-around;
+	}
+
+	.form-item {
+		display: flex;
+		align-items: center;
+	}
+
+	.button {
+		display: flex;
+		align-items: center;
+		height: 35px;
+		margin-left: 10px;
+	}
+</style>
+
+```
+:::
+
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/forms/forms)
+
+

docs/component/uniui/uni-goods-nav.md

-> **组件名：uni-goods-nav**
+::: tip 组件名：uni-goods-nav
 > 代码块： `uGoodsNav`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-goods-nav)
 
-商品加入购物车，立即购买
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-goods-nav)
+:::
 
+商品加入购物车，立即购买
 
+## 介绍
 ### 基本用法
 
 ```html
-<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
-```
+<template>
+	<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
+</template>
+<script>
 
-```javascript
 export default {
 	data () {
 	  return {
@@ -56,6 +58,7 @@ export default {
 	  }
 	}
 }
+</script>
 ```
 
 ## API
@@ -94,10 +97,135 @@ export default {
 |@click			|左侧点击事件			|e = {index,content}|
 |@buttonClick	|右侧按钮组点击事件	|e = {index,content}|
 
-### 插件预览地址
 
-[https://uniapp.dcloud.io/h5/pages/extUI/goods-nav/goods-nav](https://uniapp.dcloud.io/h5/pages/extUI/goods-nav/goods-nav)
 
-## 组件示例
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-goods-nav) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav
+> Template
+``` html
+<template>
+	<view class="uni-container">
+		<uni-card is-full>
+			<text class="uni-h6"> uni-goods-nav 组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作</text>
+		</uni-card>
+		<uni-section title="基础用法" type="line">
+			<uni-goods-nav @click="onClick" />
+		</uni-section>
+		<uni-section title="自定义用法" type="line">
+			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
+				@buttonClick="buttonClick" />
+			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
+				@buttonClick="buttonClick" style="margin-top: 20px;" />
+		</uni-section>
+		<view class="goods-carts">
+			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
+				@buttonClick="buttonClick" />
+		</view>
+
+	</view>
+</template>
+``` 
+
+> Script
+``` html
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				options: [{
+					icon: 'chat',
+					text: '客服'
+				}, {
+					icon: 'shop',
+					text: '店铺',
+					info: 2,
+					infoBackgroundColor: '#007aff',
+					infoColor: "#f5f5f5"
+				}, {
+					icon: 'cart',
+					text: '购物车',
+					info: 2
+				}],
+				buttonGroup: [{
+						text: '加入购物车',
+						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
+						color: '#fff'
+					},
+					{
+						text: '立即购买',
+						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
+						color: '#fff'
+					}
+				],
+				customButtonGroup: [{
+						text: '加入购物车',
+						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
+						color: '#fff'
+					},
+					{
+						text: '立即购买',
+						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
+						color: '#fff'
+					}
+				],
+				customButtonGroup1: [{
+					text: '立即购买',
+					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
+					color: '#fff'
+				}]
+			}
+		},
+		onLoad() {},
+		methods: {
+			onClick(e) {
+				uni.showToast({
+					title: `点击${e.content.text}`,
+					icon: 'none'
+				})
+			},
+			buttonClick(e) {
+				console.log(e)
+				this.options[2].info++
+			}
+		}
+	}
+</script>
+``` 
+
+> Style
+``` html
+<style lang="scss">
+	.example-body {
+		padding: 0;
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+	}
+
+	.goods-carts {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		position: fixed;
+		left: 0;
+		right: 0;
+		/* #ifdef H5 */
+		left: var(--window-left);
+		right: var(--window-right);
+		/* #endif */
+		bottom: 0;
+	}
+</style>
+
+```
+:::
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav](https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav)
\ No newline at end of file

docs/component/uniui/uni-grid.md

 
-> **组件名：uni-grid**
+::: tip 组件名：uni-grid
 > 代码块： `uGrid`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-grid)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-grid)
+:::
 
 宫格组件。
 
-> **注意事项**
+## 介绍
+::: warning 注意事项
 > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
-> - 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现
-> - Grid 组件仅在自定义组件模式下支持
-> - column 属性最大值最好不要超过 5 个，如果超过，需要注意内容显示
-> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： `详情 --> 项目配置 --> 启用 component2 编译`
-> - 为了避免高度显示错误组件内必须要有内容
+- 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现
+- Grid 组件仅在自定义组件模式下支持
+- column 属性最大值最好不要超过 5 个，如果超过，需要注意内容显示
+- 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： `详情 --> 项目配置 --> 启用 component2 编译`
+- 为了避免高度显示错误组件内必须要有内容
+:::
 
 ### 基本用法
 
-在 ``template`` 中使用组件
-
 ```html
-<!-- 一般用法 -->
 <uni-grid :column="3">
 	<uni-grid-item>
 		<text class="text">文本</text>
@@ -31,8 +31,9 @@
 		<text class="text">文本</text>
 	</uni-grid-item>
 </uni-grid>
-
-<!-- 不带边框并矩形显示 -->
+```
+### 不带边框并矩形显示
+```html
 <uni-grid :column="3" :showBorder="false"  :square="false">
 	<uni-grid-item>
 		<text class="text">文本</text>
@@ -82,6 +83,307 @@
 |index|Number	|-		|子组件的唯一标识 ，点击grid会返回当前的标识|
 
 
-## 组件示例
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid](https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid)
\ No newline at end of file
+
+
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-grid) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid
+> Template
+``` html
+<template>
+	<view class="warp">
+		<uni-card is-full :is-shadow="false">
+			<text class="uni-h6">宫格组件主要使用场景如：商品推荐列表、热门内容等</text>
+		</uni-card>
+		<uni-section title="基础样式" type="line" padding>
+			<uni-grid :column="4" :highlight="true" @change="change">
+				<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
+					<view class="grid-item-box" style="background-color: #fff;">
+						<uni-icons type="image" :size="30" color="#777" />
+						<text class="text">文本信息</text>
+					</view>
+				</uni-grid-item>
+			</uni-grid>
+		</uni-section>
+		<uni-section title="自定义列数" type="line" padding>
+			<uni-grid :column="4" :highlight="true" @change="change">
+				<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
+					<view class="grid-item-box" style="background-color: #fff;">
+						<uni-icons type="image" :size="30" color="#777" />
+						<text class="text">文本信息</text>
+					</view>
+				</uni-grid-item>
+			</uni-grid>
+		</uni-section>
+
+		<uni-section title="滑动视图" type="line" padding>
+			<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
+			<swiper class="swiper" :indicator-dots="true">
+				<swiper-item>
+					<uni-grid :column="3" :highlight="true" @change="change">
+						<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
+							<view class="grid-item-box">
+								<image :src="item.url" class="image" mode="aspectFill" />
+								<text class="text">{{ item.text }}</text>
+							</view>
+						</uni-grid-item>
+					</uni-grid>
+				</swiper-item>
+				<swiper-item>
+					<uni-grid :column="3" :highlight="true" @change="change">
+						<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
+							<view class="grid-item-box">
+								<image :src="item.url" class="image" mode="aspectFill" />
+								<text class="text">{{ item.text }}</text>
+							</view>
+						</uni-grid-item>
+					</uni-grid>
+				</swiper-item>
+				<swiper-item>
+					<uni-grid :column="3" :highlight="true" @change="change">
+						<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
+							<view class="grid-item-box">
+								<image :src="item.url" class="image" mode="aspectFill" />
+								<text class="text">{{ item.text }}</text>
+							</view>
+						</uni-grid-item>
+					</uni-grid>
+				</swiper-item>
+			</swiper>
+		</uni-section>
+		<uni-section title="动态加载" type="line" padding>
+			<view class="grid-dynamic-box">
+				<uni-grid :column="3" :highlight="true" @change="change">
+					<uni-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index">
+						<view class="grid-item-box" :style="{'backgroundColor':item.color}">
+							<image :src="item.url" class="image" mode="aspectFill" />
+							<text class="text">{{ item.text }}</text>
+						</view>
+					</uni-grid-item>
+				</uni-grid>
+			</view>
+			<button type="primary" @click="add">点击添加一个宫格</button>
+			<button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;"
+				@click="del">点击删除一个宫格</button>
+		</uni-section>
+		<uni-section title="无边框带角标（3列）" type="line" padding>
+			<uni-grid :column="3" :show-border="false" :square="false" @change="change">
+				<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
+					<view class="grid-item-box">
+						<image class="image" :src="item.url" mode="aspectFill" />
+						<text class="text">{{item.text}}</text>
+						<view v-if="item.badge" class="grid-dot">
+							<uni-badge :text="item.badge" :type="item.type" />
+						</view>
+					</view>
+				</uni-grid-item>
+			</uni-grid>
+		</uni-section>
+		<uni-section title="矩形宫格（3列）" type="line" padding>
+			<uni-grid :column="3" :square="false" :highlight="false" @change="change">
+				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
+					<view class="grid-item-box">
+						<image :src="item.url" class="image" mode="aspectFill" />
+						<text class="text">{{ item.text }}</text>
+					</view>
+				</uni-grid-item>
+			</uni-grid>
+		</uni-section>
+		<uni-section title="边框颜色（4列 无文字）" type="line" padding>
+			<uni-grid :column="4" border-color="#03a9f4" @change="change">
+				<uni-grid-item :index="0">
+					<view class="grid-item-box">
+						<image class="image" src="/static/c1.png" mode="aspectFill" />
+					</view>
+				</uni-grid-item>
+				<uni-grid-item :index="1">
+					<view class="grid-item-box">
+						<image class="image" src="/static/c2.png" mode="aspectFill" />
+					</view>
+				</uni-grid-item>
+				<uni-grid-item :index="2">
+					<view class="grid-item-box">
+						<image class="image" src="/static/c3.png" mode="aspectFill" />
+					</view>
+				</uni-grid-item>
+				<uni-grid-item :index="3">
+					<view class="grid-item-box">
+						<image class="image" src="/static/c4.png" mode="aspectFill" />
+					</view>
+				</uni-grid-item>
+			</uni-grid>
+		</uni-section>
+	</view>
+</template>
+``` 
+> Script
+``` html
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				dynamicList: [],
+				list: [{
+						url: '/static/c1.png',
+						text: 'Grid 1',
+						badge: '0',
+						type: "primary"
+					},
+					{
+						url: '/static/c2.png',
+						text: 'Grid 2',
+						badge: '1',
+						type: "success"
+					},
+					{
+						url: '/static/c3.png',
+						text: 'Grid 3',
+						badge: '99',
+						type: "warning"
+					},
+					{
+						url: '/static/c4.png',
+						text: 'Grid 4',
+						badge: '2',
+						type: "error"
+					},
+					{
+						url: '/static/c5.png',
+						text: 'Grid 5'
+					},
+					{
+						url: '/static/c6.png',
+						text: 'Grid 6'
+					},
+					{
+						url: '/static/c7.png',
+						text: 'Grid 7'
+					},
+					{
+						url: '/static/c8.png',
+						text: 'Grid 8'
+					},
+					{
+						url: '/static/c9.png',
+						text: 'Grid 9'
+					}
+				]
+			}
+		},
+		methods: {
+			change(e) {
+				let {
+					index
+				} = e.detail
+				this.list[index].badge && this.list[index].badge++
+
+				uni.showToast({
+					title: `点击第${index+1}个宫格`,
+					icon: 'none'
+				})
+			},
+			add() {
+				if (this.dynamicList.length < 9) {
+					this.dynamicList.push({
+						url: `/static/c${this.dynamicList.length+1}.png`,
+						text: `Grid ${this.dynamicList.length+1}`,
+						color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
+					})
+				} else {
+					uni.showToast({
+						title: '最多添加9个',
+						icon: 'none'
+					});
+				}
+			},
+			del() {
+				this.dynamicList.splice(this.dynamicList.length - 1, 1)
+			}
+		}
+	}
+</script>
+``` 
+> Style
+``` html
+<style lang="scss">
+	.image {
+		width: 25px;
+		height: 25px;
+	}
+
+	.text {
+		font-size: 14px;
+		margin-top: 5px;
+	}
+
+	.example-body {
+		/* #ifndef APP-NVUE */
+		// display: block;
+		/* #endif */
+	}
+
+	.grid-dynamic-box {
+		margin-bottom: 15px;
+	}
+
+	.grid-item-box {
+		flex: 1;
+		// position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 15px 0;
+	}
+
+	.grid-item-box-row {
+		flex: 1;
+		// position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 15px 0;
+	}
+
+	.grid-dot {
+		position: absolute;
+		top: 5px;
+		right: 15px;
+	}
+
+	.swiper {
+		height: 420px;
+	}
+
+	/* #ifdef H5 */
+	@media screen and (min-width: 768px) and (max-width: 1425px) {
+		.swiper {
+			height: 630px;
+		}
+	}
+
+	@media screen and (min-width: 1425px) {
+		.swiper {
+			height: 830px;
+		}
+	}
+
+	/* #endif */
+</style>
+
+```
+:::
+
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid)
\ No newline at end of file

docs/component/uniui/uni-group.md

-> **组件名：uni-group**
+::: tip 组件名：uni-group
 > 代码块： `uGroup`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-group)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-group)
+:::
 
 分组组件可用于将组件分组，添加间隔，以产生明显的区块。
 
+## 介绍
 ### 基本用法
 
-在 ``template`` 中使用组件
 
 ```html
 <uni-group title="分组1" top="20">
@@ -30,6 +31,54 @@
 |mode|String|''|模式 ，card 为卡片模式|
 
 
-## 组件示例
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-group) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
+
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/group/group
+> Template
+``` html
+<template>
+	<view class="container">
+		<uni-card :is-shadow="false" is-full>
+			<text class="uni-h6">分组组件可用于将组件分组，添加间隔，以产生明显的区块。</text>
+		</uni-card>
+		<uni-section title="基础分组" type="line">
+			<uni-group>
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+			</uni-group>
+			<uni-group title="基本模式" margin-top="20">
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+			</uni-group>
+		</uni-section>
+		<uni-section title="卡片分组" type="line">
+			<uni-group mode="card">
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+			</uni-group>
+
+			<uni-group title="card 模式" mode="card">
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+				<view> 分组内容 </view>
+			</uni-group>
+		</uni-section>
+
+	</view>
+</template>
+``` 
+:::
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/group/group](https://hellouniapp.dcloud.net.cn/pages/extUI/group/group)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/group/group)
\ No newline at end of file

docs/component/uniui/uni-icons.md

 
-> **组件名：uni-icons**
+::: tip 组件名：uni-icons
 > 代码块： `uIcons`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-icons)
 
-用于展示 icons 图标 。
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-icons)
+:::
+
+用于展示 icon 图标 。
 
-### 基本用法
 
-在 ``template`` 中使用组件
+## 介绍
+### 基本用法
 
 ```html
 <uni-icons type="contact" size="30"></uni-icons>
 ```
 ## 图标示例
 
-点击复制图标类型
+**点击复制图标类型**
 
 <icons-layouts></icons-layouts>
 
@@ -40,7 +41,9 @@
 |@click|点击 Icon 触发事件|-    |
 
 ## 自定义图标 
-> nvue 页面暂时不支持自定义图标，如需在 nvue 中使用 ，请自行引入字体文件
+::: danger 注意
+nvue 页面暂时不支持自定义图标，如需在 nvue 中使用 ，请自行引入字体文件
+:::
 
 `uni-icons` 已经收录了日常开发中常用的图标 ，但是因为体积问题 ，不可能一直无限添加新图标 ，所以`uni-icons` 也提供了扩展的方法。 
 
@@ -109,7 +112,3 @@
 ```html
 <uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons>
 ```
-
-## 组件示例
-
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
\ No newline at end of file

docs/component/uniui/uni-indexed-list.md

-> **组件名：uni-indexed-list**
+::: tip 组件名：uni-indexed-list
 > 代码块： `uIndexedList`
-> 
->  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list)
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list)
+::: 
 
 用于展示索引列表。
 
+## 介绍
 ### 基本用法
 
-在 ``template`` 中使用组件
-
 ```html
 <uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
 ```
@@ -17,10 +17,10 @@
 
 ### IndexedList Props
 
-|属性名		|类型	|默认值	|说明														|
-|:-:		|:-:	|:-:	|:-:														|
-|options	|Object	|-		|索引列表需要的数据对象										|
-|showSelect	|Boolean|-		| 展示模式，true 为展示默认，false 为选择模式，默认为 false	|
+|属性名|类型|默认值|说明|
+|:-:|:-:|:-:|:-:|
+|options|Object	|-|索引列表需要的数据对象|
+|showSelect	|Boolean|-| 展示模式，true 为展示默认，false 为选择模式，默认为 false	|
 
 **options 数据格式说明**
 
@@ -49,11 +49,312 @@
 
 ### IndexedList Events
 
-|事件名	|说明															|返回值	|
-|:-:		|:-:															|:-:	|
-|click	|点击列表事件 ，返回当前选择项的事件对象	|-		|
+|事件名	|说明|返回值|
+|:-:|:-:|:-:|
+|click	|点击列表事件 ，返回当前选择项的事件对象|-|
+
+
+## 示例
+::: danger 注意
+示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
+
+请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。
+:::
 
+::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list
+> Template
+``` html
+<template>
+	<uni-indexed-list :options="list" :show-select="true" @click="bindClick" />
+</template>
+``` 
+> Script
 
-## 组件示例
+``` html
+<script>
+	import airport from '@/common/airport.js'
+	export default {
+		components: {},
+		data() {
+			return {
+				list: airport.list
+			}
+		},
+		methods: {
+			bindClick(e) {
+				console.log('点击item，返回数据' + JSON.stringify(e))
+			}
+		}
+	}
+</script>
+```
+
+> airport.js
+
+```js
+export default {
+	'list': [{
+		'letter': 'A',
+		'data': [
+			'阿克苏机场',
+			'阿拉山口机场',
+			'阿勒泰机场',
+			'阿里昆莎机场',
+			'安庆天柱山机场',
+			'澳门国际机场'
+		]
+	}, {
+		'letter': 'B',
+		'data': [
+			'保山机场',
+			'包头机场',
+			'北海福成机场',
+			'北京南苑机场',
+			'北京首都国际机场'
+		]
+	}, {
+		'letter': 'C',
+		'data': [
+			'长白山机场',
+			'长春龙嘉国际机场',
+			'常德桃花源机场',
+			'昌都邦达机场',
+			'长沙黄花国际机场',
+			'长治王村机场',
+			'常州奔牛机场',
+			'成都双流国际机场',
+			'赤峰机场'
+		]
+	}, {
+		'letter': 'D',
+		'data': [
+			'大理机场',
+			'大连周水子国际机场',
+			'大庆萨尔图机场',
+			'大同东王庄机场',
+			'达州河市机场',
+			'丹东浪头机场',
+			'德宏芒市机场',
+			'迪庆香格里拉机场',
+			'东营机场',
+			'敦煌机场'
+		]
+	}, {
+		'letter': 'E',
+		'data': [
+			'鄂尔多斯机场',
+			'恩施许家坪机场',
+			'二连浩特赛乌苏国际机场'
+		]
+	}, {
+		'letter': 'F',
+		'data': [
+			'阜阳西关机场',
+			'福州长乐国际机场'
+		]
+	}, {
+		'letter': 'G',
+		'data': [
+			'赣州黄金机场',
+			'格尔木机场',
+			'固原六盘山机场',
+			'广元盘龙机场',
+			'广州白云国际机场',
+			'桂林两江国际机场',
+			'贵阳龙洞堡国际机场'
+		]
+	}, {
+		'letter': 'H',
+		'data': [
+			'哈尔滨太平国际机场',
+			'哈密机场',
+			'海口美兰国际机场',
+			'海拉尔东山国际机场',
+			'邯郸机场',
+			'汉中机场',
+			'杭州萧山国际机场',
+			'合肥骆岗国际机场',
+			'和田机场',
+			'黑河机场',
+			'呼和浩特白塔国际机场',
+			'淮安涟水机场',
+			'黄山屯溪国际机场'
+		]
+	}, {
+		'letter': 'I',
+		'data': []
+	}, {
+		'letter': 'J',
+		'data': [
+			'济南遥墙国际机场',
+			'济宁曲阜机场',
+			'鸡西兴凯湖机场',
+			'佳木斯东郊机场',
+			'嘉峪关机场',
+			'锦州小岭子机场',
+			'景德镇机场',
+			'井冈山机场',
+			'九江庐山机场',
+			'九寨黄龙机场'
+		]
+	}, {
+		'letter': 'K',
+		'data': [
+			'喀什机场',
+			'克拉玛依机场',
+			'库车龟兹机场',
+			'库尔勒机场',
+			'昆明巫家坝国际机场'
+		]
+	}, {
+		'letter': 'L',
+		'data': [
+			'拉萨贡嘎机场',
+			'兰州中川机场',
+			'丽江三义机场',
+			'黎平机场',
+			'连云港白塔埠机场',
+			'临沧机场',
+			'临沂机场',
+			'林芝米林机场',
+			'柳州白莲机场',
+			'龙岩冠豸山机场',
+			'泸州蓝田机场',
+			'洛阳北郊机场'
+		]
+	}, {
+		'letter': 'M',
+		'data': [
+			'满洲里西郊机场',
+			'绵阳南郊机场',
+			'漠河古莲机场',
+			'牡丹江海浪机场'
+		]
+	}, {
+		'letter': 'N',
+		'data': [
+			'南昌昌北国际机场',
+			'南充高坪机场',
+			'南京禄口国际机场',
+			'南宁吴圩机场',
+			'南通兴东机场',
+			'南阳姜营机场',
+			'宁波栎社国际机场'
+		]
+	}, {
+		'letter': 'O',
+		'data': []
+	}, {
+		'letter': 'P',
+		'data': [
+			'普洱思茅机场'
+		]
+	}, {
+		'letter': 'Q',
+		'data': [
+			'齐齐哈尔三家子机场',
+			'秦皇岛山海关机场',
+			'青岛流亭国际机场',
+			'衢州机场',
+			'泉州晋江机场'
+		]
+	}, {
+		'letter': 'R',
+		'data': [
+			'日喀则和平机场'
+		]
+	}, {
+		'letter': 'S',
+		'data': [
+			'三亚凤凰国际机场',
+			'汕头外砂机场',
+			'上海虹桥国际机场',
+			'上海浦东国际机场',
+			'深圳宝安国际机场',
+			'沈阳桃仙国际机场',
+			'石家庄正定国际机场',
+			'苏南硕放国际机场'
+		]
+	}, {
+		'letter': 'T',
+		'data': [
+			'塔城机场',
+			'太原武宿国际机场',
+			'台州路桥机场 (黄岩机场)',
+			'唐山三女河机场',
+			'腾冲驼峰机场',
+			'天津滨海国际机场',
+			'通辽机场',
+			'铜仁凤凰机场'
+		]
+	}, {
+		'letter': 'U',
+		'data': []
+	}, {
+		'letter': 'V',
+		'data': []
+	}, {
+		'letter': 'W',
+		'data': [
+			'万州五桥机场',
+			'潍坊机场',
+			'威海大水泊机场',
+			'文山普者黑机场',
+			'温州永强国际机场',
+			'乌海机场',
+			'武汉天河国际机场',
+			'乌兰浩特机场',
+			'乌鲁木齐地窝堡国际机场',
+			'武夷山机场',
+			'梧州长洲岛机场'
+		]
+	}, {
+		'letter': 'X',
+		'data': [
+			'西安咸阳国际机场',
+			'西昌青山机场',
+			'锡林浩特机场',
+			'西宁曹家堡机场',
+			'西双版纳嘎洒机场',
+			'厦门高崎国际机场',
+			'香港国际机场',
+			'襄阳刘集机场',
+			'兴义机场',
+			'徐州观音机场'
+		]
+	}, {
+		'letter': 'Y',
+		'data': [
+			'延安二十里堡机场',
+			'盐城机场',
+			'延吉朝阳川机场',
+			'烟台莱山国际机场',
+			'宜宾菜坝机场',
+			'宜昌三峡机场',
+			'伊春林都机场',
+			'伊宁机场',
+			'义乌机场',
+			'银川河东机场',
+			'永州零陵机场',
+			'榆林榆阳机场',
+			'玉树巴塘机场',
+			'运城张孝机场'
+		]
+	}, {
+		'letter': 'Z',
+		'data': [
+			'湛江机场',
+			'昭通机场',
+			'郑州新郑国际机场',
+			'芷江机场',
+			'重庆江北国际机场',
+			'中卫香山机场',
+			'舟山朱家尖机场',
+			'珠海三灶机场'
+		]
+	}]
+}
+```
+:::
 
-点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list](https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list)
\ No newline at end of file