@gmcb/uv-ui 0.2.26 → 0.3.0

package/docs/api/utils/time.md

@@ -0,0 +1,81 @@
+## Time 时间格式化
+
+### 按需引入
+
+如果未做全局[扩展配置](https://www.uvui.cn/components/setting.html)，可以按需引入：
+
+```js
+// 引入
+import { timeFormat } from '@gmcb/uv-ui/libs/function/index.js';
+// 调用
+timeFormat(...);
+```
+
+### timeFormat(time,format) | date(time,format) 格式化时间
+
+该函数必须传入第一个参数，第二个参数是可选的，函数返回一个格式化好的时间。
+
+- `time` <String\> 任何合法的 `时间格式`、`秒` 或 `毫秒` 的时间戳
+- `format` <String\> 时间格式，可选。默认为`yyyy-mm-dd`，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如：
+`yyyy:mm:dd`，`yyyy-mm-dd`，`yyyy年mm月dd日`，`yyyy年mm月dd日 hh时MM分ss秒`，`yyyy/mm/dd/`，`MM:ss`等组合
+
+```vue
+<template>
+	<view>
+		<view>时间1为：{{time}}</view>
+		<view>时间2为：{{time2}}</view>
+		<view>时间3为：{{time3}}</view>
+		<view>时间4为：{{time4}}</view>
+	</view>
+</template>
+<script setup>
+import { computed } from "vue";
+const time = computed(() => {
+  return uni.$uv.timeFormat(new Date().getTime());
+});
+const time2 = computed(() => {
+  return uni.$uv.timeFormat('2023-08-06', 'yyyy年mm月dd日 hh时MM分ss秒');
+});
+const time3 = computed(() => {
+  return uni.$uv.date(new Date().getTime(), 'yyyy/mm/dd');
+});
+const time4 = computed(() => {
+  return uni.$uv.date('2023-08-06', 'yyyy年mm月dd日');
+});
+
+</script>
+```
+
+### timeFrom(time, format = String | false)  多久以前
+
+该函数必须传入第一个参数，格式为任何合法的`时间格式`、`秒`或`毫秒`的时间戳，第二个参数是可选的，返回的值类似`刚刚`，`25分钟前`，`3小时前`，`7天前`的结果。
+
+如果第二个参数是时间的格式，当前和传入时间戳相差大于一个月时，返回格式化好的时间；如果第二个参数为`false`，则不会返回格式化好的时间，而是诸如"xxx年前"的结果。
+
+- `timestamp` <String\> 时间戳
+- `format` <String / false\> 时间格式，默认为`yyyy-mm-dd`，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如：
+`yyyy:mm:dd`，`yyyy-mm-dd`，`yyyy年mm月dd日`，`yyyy年mm月dd日 hh时MM分ss秒`，`yyyy/mm/dd/`，`MM:ss`等组合。
+如果时间戳距离此时的时间，大于一个月，则返回一个格式化好的时间，如果此参数为`false`，返回均为"多久之前"的结果。
+
+```vue
+<template>
+	<view>
+		<view>时间1为：{{time1}}</view>
+		<view>时间2为：{{time2}}</view>
+		<view>时间3为：{{time3}}</view>
+	</view>
+</template>
+<script setup>
+import { computed } from "vue";
+const time1 = computed(() => {
+  return uni.$uv.timeFrom(new Date().getTime());
+});
+const time2 = computed(() => {
+  return uni.$uv.timeFrom(new Date('2023-02-06').getTime(), false);
+});
+const time3 = computed(() => {
+  return uni.$uv.timeFrom(new Date('2023-02-06').getTime(), 'yyyy年mm月dd日');
+});
+
+</script>
+```

package/docs/api/utils/trim.md

@@ -0,0 +1,24 @@
+## Trim 去除空格
+
+### 按需引入
+
+如果未做全局[扩展配置](https://www.uvui.cn/components/setting.html)，可以按需引入：
+
+```js
+// 引入，实例中未写完，自己根据需求写
+import { trim } from '@gmcb/uv-ui/libs/function/test.js';
+// 调用
+trim('你好   ');
+```
+
+### trim(str, pos)
+
+该方法可以去除空格，分别可以去除所有空格，两端空格，左边空格，右边空格，默认为去除两端空格
+
+- `str` <String\> 字符串
+- `pos` <String\> 去除那些位置的空格，可选为：`both`-默认值，去除两端空格，`left`-去除左边空格，`right`-去除右边空格，`all`-去除包括中间和两端的所有空格
+
+```js
+console.log(uni.$uv.trim('abc    b ', 'all')); // 去除所有空格
+console.log(uni.$uv.trim(' abc '));	// 去除两端空格
+```

package/docs/components/actionSheet.md

@@ -0,0 +1,236 @@
+## ActionSheet 操作菜单 <to-api/>
+
+<demo-model url="/pages/componentsD/actionSheet/actionSheet"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-action-sheet**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-action-sheet)
+
+:::
+
+本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。  
+本组件功能类似于uni的`uni.showActionSheet`API，配置更加灵活，所有平台都表现一致。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 通过`title`(设置标题)，`cancelText`(取消按钮的文字，不为空时显示按钮)，`description`(选项上方的描述信息)。
+- 通过`actions`设置需要显示的菜单，该值为一个数组，元素为对象，对象至少要提供`name`属性，另外可选的有`subname`(描述)，`disabled`(是否禁用)，`loading`(加载动画)，
+`color`(字体颜色)，`fontSize`(字体大小)。
+- 通过`ref`调用`open()`控制组件的打开。
+
+```vue
+<template>
+	<view>
+		<uv-action-sheet 
+		ref="actionSheet"
+		:actions="list" 
+		title="标题"
+		@select="select"
+		@close="close">
+		</uv-action-sheet>
+		<button @click="open">打开ActionSheet</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const actionSheet = ref(null);
+const list = ref([{
+  name: '选项一',
+  subname: "选项一描述",
+  color: '#ffaa7f',
+  fontSize: '20'
+}, {
+  name: '选项二禁用',
+  disabled: true
+}, {
+  name: '开启load加载',
+  //开启后文字不显示
+  loading: true
+}]);
+function open() {
+  actionSheet.value.open();
+}
+function select(e) {
+  console.log('选中该项：', e);
+}
+function close() {
+  console.log('关闭');
+}
+
+</script>
+```
+
+### 配置点击遮罩关闭和点击某个菜单项时关闭弹窗
+
+- 通过`closeOnClickAction`参数来配置点击某个菜单项时是否关闭弹窗，设置为`false`不影响`select`事件返回，默认`true`。
+- 通过`closeOnClickOverlay`参数配置点击遮罩是否允许关闭，默认`true`。
+
+```vue
+<template>
+	<view>
+		<uv-action-sheet 
+		ref="actionSheet" 
+		:actions="list" 
+		title="标题" 
+		:closeOnClickOverlay="false" 
+		:closeOnClickAction="false" 
+		@select="select" 
+		@close="close">
+		</uv-action-sheet>
+		<button @click="open">打开ActionSheet</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const actionSheet = ref(null);
+const list = ref([{
+  name: '选项一'
+}, {
+  name: '选项二'
+}]);
+function open() {
+  actionSheet.value.open();
+}
+function select(e) {
+  console.log('选中该项：', e);
+}
+function close() {
+  console.log('关闭');
+}
+
+</script>
+```
+
+### 选项开放能力
+
+所有开放能力请参考`uni`提供的`button`[开放能力](https://uniapp.dcloud.net.cn/component/button.html#open-type-%E6%9C%89%E6%95%88%E5%80%BC)。
+
+```vue
+<template>
+	<view>
+		<uv-action-sheet 
+		ref="actionSheet" 
+		:actions="list" 
+		title="开放能力" 
+		@select="select" 
+		@close="close">
+		</uv-action-sheet>
+		<button @click="open">打开ActionSheet</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const actionSheet = ref(null);
+const list = ref([{
+  name: '开放能力-分享',
+  openType: 'share'
+}, {
+  name: '开放能力-获取用户信息',
+  openType: 'getUserInfo'
+}, {
+  name: '开放能力-客服会话',
+  openType: 'contact'
+}, {
+  name: '开放能力-其他'
+}]);
+function open() {
+  actionSheet.value.open();
+}
+function select(e) {
+  console.log('选中该项：', e);
+  if (e.name == '开放能力-其他') {
+    uni.showModal({
+      content: '参考uni提供的button开放能力',
+      showCancel: false
+    });
+  }
+}
+function close() {
+  console.log('关闭');
+}
+
+</script>
+```
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### ActionSheet Props
+
+| 参数					|说明																								|类型				|默认值	|可选值							|
+| :-					|:-																									|:-					|:-		|:-								|
+| title					| 设置标题																							| String			| -		| -								|
+| description			| 选项上方的描述信息																	| String			| -		| -								|
+| actions				| 按钮的文字数组，见上方文档示例																		| Array\<Object\>	| [ ]	| -								|
+| cancelText			| 取消按钮的文字，不为空时显示按钮																		| String			| -		| -								|
+| safeAreaInsetBottom	| 是否开启<a href="/guide/safeAreaInset.html" target="_blank">底部安全区适配</a>| Boolean			| false	| true	&#124; false						|
+| closeOnClickOverlay	| 点击遮罩是否允许关闭组件	| Boolean			| -		| -								|
+| closeOnClickAction	| 点击某个菜单项时是否关闭组件 | String			| true	| true &#124; false	 |
+| round					| 圆角值，默认无圆角																					| String &#124; Number			| 0	| -							|
+| lang					| 指定返回用户信息的语言，`zh_CN` 简体中文，`zh_TW` 繁体中文，`en` 英文											| String				| en	| en &#124; zh_CN &#124; zh_TW &#124;	|
+| sessionFrom			| 会话来源，`open-type="contact"`时有效。只微信小程序有效													| String				| -		| -								|
+| sendMessageTitle		| 会话内消息卡片标题，`openType="contact"`时有效															| String				| -		| -								|
+| sendMessagePath		| 会话内消息卡片点击跳转小程序路径，`openType="contact"`时有效												| String				| -		| -								|
+| sendMessageImg		| 会话内消息卡片图片，`openType="contact"`时有效															| String				| -		| -								|
+| showMessageCard		| 是否显示会话内消息卡片，设置此参数为 `true`，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，`openType="contact"`时有效| Boolean|false| true &#124; false|
+| appParameter			| 打开 APP 时，向 APP 传递的参数，`openType=launchApp` 时有效											| String				| -		| -								|
+
+### ActionSheet Actions Props
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| :- | :- | :- | :- | :- |
+| openType | 小程序的打开方式 | String | '' | - |
+| disabled | 该菜单是否禁用 | Boolean | false | true &#124; false |
+| loading | 该菜单是否处于加载状态 | Boolean | false | true &#124; false |
+| name | 该菜单的标题 | String | '' | - |
+| subname | 该菜单的描述 | String | '' | - |
+| fontSize | 该菜单`name`文字的大小，单位`px(rpx)` | String | 16px | - |
+| color | 该菜单`name`文字的颜色 | String | #303133 | - |
+
+### ActionSheet Methods
+| 方法名								| 说明					| 
+| :-								| :-					|
+| open	| 弹出操作菜单组件	 | -| 
+| close	| 关闭操作菜单组件	 | -| 
+
+### ActionSheet Events
+
+|事件名			|说明																												|回调参数			|
+|:-				|:-																													|:-					|
+|@select			| 点击`ActionSheet`列表项时触发																							| -					| 
+|@close			| 点击取消按钮时触发。点击遮罩触发该事件需要设置`:closeOnClickOverlay="true"`							| -					| -		|
+|@getuserinfo	| 用户点击该按钮时，会返回获取到的用户信息，回调的 `detail` 数据与 `wx.getUserInfo` 返回的一致，`openType="getUserInfo"`时有效	| detail			|
+|@contact		| 客服消息回调，`openType="contact"`时有效																				| -					|
+|@getphonenumber	| 获取用户手机号回调，`openType="getPhoneNumber"`时有效																	| -					|
+|@error			| 当使用开放能力时，发生错误的回调，`openType="error"`时有效																| -					|
+|@launchapp		| 打开 APP 成功的回调，`openType="launchApp"`时有效																		| -					|
+|@opensetting	| 在打开授权设置页后回调，`openType="openSetting"`时有效																	| -					|
+
+<style scoped>
+h3[id=actionsheet-props] + p + table thead tr th:nth-child(2){
+	width: 40%;
+}
+h3[id=actionsheet-events] + table thead tr th:nth-child(2){
+	width: 50%;
+}
+h3[id=calendar-methods] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>

package/docs/components/addQQGroup.md

@@ -0,0 +1,5 @@
+## 加QQ群
+
+#### 点击群号跳转QQ窗口：
+
+<qq-group></qq-group>

package/docs/components/album.md

@@ -0,0 +1,91 @@
+## Album 相册 <to-api/>
+
+<demo-model url="/pages/componentsC/album/album"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-album**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-album)
+
+:::
+
+本组件提供一个类似相册的功能，让开发者开发起来更加得心应手，功能齐全，灵活配置可以，开箱即用。减少重复的模板代码。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+通过 `urls` 属性设置相册的图片地址
+
+```vue
+<template>
+	<view>
+		<uv-album :urls="urls"></uv-album>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const urls = ref(['https://via.placeholder.com/400x200.png/3c9cff/fff']);
+
+</script>
+```
+
+### 多图模式
+
+- 通过 `urls` 传入更多的图片地址形成图片列表
+- 通过 `multipleSize` 属性可设置图片的宽高
+- 通过 `space` 属性可设置图片之间的间隙
+
+```vue
+<template>
+	<view style="width: 400rpx;">
+		<uv-album :urls="urls" multipleSize="128rpx" space="8rpx"></uv-album>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const urls = ref(['https://via.placeholder.com/100x200.png/3c9cff/fff', 'https://via.placeholder.com/200x200.png/3c9cff/fff', 'https://via.placeholder.com/300x200.png/3c9cff/fff', 'https://via.placeholder.com/280x200.png/3c9cff/fff', 'https://via.placeholder.com/240x200.png/3c9cff/fff', 'https://via.placeholder.com/180x200.png/3c9cff/fff', 'https://via.placeholder.com/140x200.png/3c9cff/fff', 'https://via.placeholder.com/150x200.png/3c9cff/fff', 'https://via.placeholder.com/90x200.png/3c9cff/fff', 'https://via.placeholder.com/220x200.png/3c9cff/fff']);
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Album Props
+
+| 参数				| 说明															| 类型					|	 默认值		|  可选值	|
+|:-					|:-																|:-						|:-				|:-			|
+| urls				| 图片地址列表 支持 Array\<String\> &#124; Array\<Object\>形式	| Array					| -				| -			|
+| keyName			| 指定从数组的对象元素中读取哪个属性作为图片地址						| String				| -				| -			|
+| singleSize		| 单图时，图片长边的长度											| String &#124; Number	| 180			| -			|
+| multipleSize		| 多图时，图片边长（宽高）								    				| String &#124; Number	| 70			| -			|
+| space				| 多图时，图片水平和垂直之间的间隔									| String &#124; Number	| 6				| -			|
+| singleMode		| 单图时，图片缩放裁剪的模式										| String				| scaleToFill	| -			|
+| multipleMode		| 多图时，图片缩放裁剪的模式										| String				| aspectFill	| -			|
+| maxCount			| 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量				| String &#124; Number	| 9				| -			|
+| previewFullImage	| 是否可以预览图片											    	| Boolean				| true			| true &#124; false		|
+| rowCount			| 每行展示图片数量，如设置，singleSize和multipleSize将会无效		    | String &#124; Number	| 3				| -			|
+| showMore			| 超出maxCount时是否显示查看更多的提示								| Boolean				| true			| true &#124; false		|
+
+
+### Album Events
+
+|事件名		|说明															| 回调参数	|
+|:-			|:-																|:-			|
+|@albumWidth	|某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送	| width		|

package/docs/components/alert.md

@@ -0,0 +1,83 @@
+## Alert 警告提示 <to-api/>
+
+<demo-model url="/pages/componentsC/alert/alert"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-alert**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-alert)
+
+:::
+
+警告提示，展现需要关注的信息。
+
+### 使用场景
+
+- 当某个页面需要向用户显示警告的信息时。
+- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 通过`title`和`description`属性设置组件的标题和描述内容
+- 通过`type`属性设置主题类型，有`primary`,`success`,`error`,`warning`,`info`可选值
+- 通过`effect`属性设置主题浅或深色调，有`light`(浅色 默认),`dark`(深色)可选值
+```vue
+<uv-alert title="uv-ui" type="warning" description="uv-ui的目标是成为uni-app生态最优秀的UI框架"></uv-alert>
+```
+
+### 图标
+
+通过`showIcon`设置是否显示图标，作用是让信息类型更加醒目。
+
+**注意**：当前版本图标为`uv-ui`内置图标，根据`type`参数显示不同的图标，无法自定义。
+
+```vue
+<uv-alert type="warning" :show-icon="true"></uv-alert>
+```
+
+### 可关闭的警告提示
+
+通过`closable`属性配置是否可关闭。显示关闭按钮，点击可关闭警告提示。
+
+```vue
+<uv-alert title="uv-ui" type="warning" description="uv-ui的目标是成为uni-app生态最优秀的UI框架" closable></uv-alert>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Alert Props
+
+| 参数			| 说明												| 类型					| 默认值			| 可选值												|
+|:-				|:-													|:-						|:-				|:-													|
+| title			| 显示的文字											| String				| -				| -													|
+| type			| 使用预设的颜色										| String				| warning		| warning &#124; success &#124; primary &#124; error &#124; info	|
+| description	| 辅助性文字，颜色比`title`浅一点，字号也小一点，可选	| String				| -				| -													|
+| closable		| 关闭按钮(默认为叉号icon图标)							| Boolean				| false			| true	&#124; false											|
+| showIcon		| 是否显示左边的辅助图标								| Boolean				| false			| true &#124; false												|
+| effect		| 多图时，图片缩放裁剪的模式							| String				| light(浅色)	| dark(深色)	 &#124;	light(浅色)								|
+| center		| 文字是否居中										| Boolean				| false			| true	&#124; false											|
+| fontSize		| 字体大小，单位`rpx`或`px`											| String &#124; Number	| 14			| -													|
+| customStyle | 自定义外部样式 | Object | - | - |
+
+
+### Alert Events
+
+|事件名	|说明			|回调参数	|
+|:-		|:-				|:-			|
+|@click	|点击组件时触发	|-			|

package/docs/components/avatar.md

@@ -0,0 +1,152 @@
+## Avatar 头像 <to-api/>
+
+<demo-model url="/pages/componentsD/avatar/avatar"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-avatar**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-avatar)
+
+:::
+
+该组件一般用于展示头像的场景，如个人中心，或者评论列表页的用户头像展示等场所。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+通过`src`指定头像的路径即可简单使用，如果传递了`text`参数，`text`将会优先起作用  
+
+**注意：** 请保证传递给`src`的是绝对地址，而不是相对地址，为什么呢？因为传入`avatar`组件的相对地址，是相对于组件的，而不是父组件(页面)，所以相对址可能会出错
+
+
+```vue
+<template>
+	<view>
+		<uv-avatar src="https://via.placeholder.com/200x200.png/2878ff"></uv-avatar>
+		<uv-avatar text="李"></uv-avatar>
+	</view>
+</template>
+```
+
+### 头像形状
+
+ `shape`参数指定头像的形状，取值`circle`为圆形，取值`square`为圆角方形，默认圆形
+
+```vue
+<template>
+	<uv-avatar src="https://via.placeholder.com/200x200.png/2878ff" shape="square"></uv-avatar>
+</template>
+```
+
+### 图标头像
+
+设置`icon`属性指定头像的图标，图标可参考`icon`组件
+
+```vue
+<template>
+	<view>
+		<uv-avatar icon="red-packet-fill" fontSize="22"></uv-avatar>
+		<uv-avatar icon="star-fill" fontSize="22"></uv-avatar>
+	</view>
+</template>
+```
+
+### 文字头像（自动背景色）
+
+设置`randomBgColor`属性开启头像的自动背景色
+
+```vue
+<template>
+	<uv-avatar text="北" fontSize="18" randomBgColor></uv-avatar>
+</template>
+```
+
+### 默认头像
+
+如果头像加载失败，导致加载图片失败，将会显示一个默认的灰色头像
+
+### 头像组
+
+使用`uv-avatar-group`实现头像组
+
+```vue
+<template>
+	<uv-avatar-group :urls="urls" size="35" gap="0.4"></uv-avatar-group>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const urls = ref(['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg', 'https://cdn.uviewui.com/uview/album/4.jpg', 'https://cdn.uviewui.com/uview/album/7.jpg', 'https://cdn.uviewui.com/uview/album/6.jpg', 'https://cdn.uviewui.com/uview/album/5.jpg']);
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Avatar Props
+
+| 参数				| 说明  	| 类型					|  默认值	|  可选值	|
+|:-					|:-		|:-		 |:-	 |:-	|
+| src				| 头像路径，如加载失败，将会显示默认头像(不能为相对路径)		| String	| -	| -	|
+| shape				| 头像形状	| String				| circle	| circle &#124; square	|
+| size				| 头像尺寸，可以为指定字符串(large, default, mini)，或者数值													| String &#124; Number	| 40		| -			|
+| mode				| 头像图片的裁剪类型，与uni的`image`组件的`mode`参数一致，如效果达不到需求，可尝试传`widthFix`值					| String				| scaleToFill| -		|
+| text				| 用文字替代图片，级别优先于`src`		| String | - | - |
+| bg-color			| 背景颜色，一般显示文字时用 | String | #c0c4cc	| -	 |
+| color				| 文字颜色 	| String | #ffffff	| -	|
+| font-size			| 文字大小	| String &#124; Number	| 18 | - |
+| icon				| 显示的图标 | String | - | - |
+| mp-avatar			| 显示小程序头像，只对百度，微信，QQ小程序有效 | Boolean | false | true &#124; false |
+| random-bg-color	| 是否使用随机背景色 | Boolean | false | true  &#124; false |
+| default-url		| 加载失败的默认头像(组件有内置默认图片)	 | String | -	 | -	 	|
+| color-index		| 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间				| String &#124; Number	| -			| -			|
+| name				| 组件标识符 | String	 	| level		| -			|
+| customStyle | 自定义外部样式 | Object | - | - | 
+
+
+### Avatar Events
+
+|事件名	|说明		|回调参数					|
+|:-		|:-			|:-							|
+| @click	| 头像被点击	| index: 用户传递的标识符		|
+
+### AvatarGroup Props
+
+| 参数		| 说明											| 类型					| 默认值		|  可选值	|
+|:-			|:-												|:-						|:-			|:-			|
+| urls		| 头像图片组										| Array					| []		| -			|
+| maxCount	| 最多展示的头像数量								| String &#124; Number	| 5			| -			|
+| shape		| 头像形状										| String				| circle	| circle &#124; square	|
+| mode		| 图片裁剪模式									| String				| aspectFill| -			|
+| showMore	| 超出maxCount时是否显示查看更多的提示				| Boolean				| true		| -			|
+| size		| 头像大小										| String &#124; Number	| 40		| -			|
+| keyName	| 指定从数组的对象元素中读取哪个属性作为图片地址		| String				| -			| -			|
+| gap		| 头像之间的遮挡比例（0.4代表遮挡40%）				| String &#124; Number	| 0.5		| -			|
+| extraValue | 需额外显示的值，如设置则优先于内部的`urls.length - maxCount`值			| String &#124; Number	| -		| -			|
+
+### AvatarGroup Events
+
+|事件名		|说明			|回调参数	|
+|:-			|:-				|:-			|
+| @showMore	| 头像组更多点击	| -			|
+
+<style scoped>
+h3[id=avatargroup-props] + table thead tr th:nth-child(2){
+	width: 35%;
+}
+</style>