@gmcb/uv-ui 0.2.26 → 0.3.0

package/docs/components/readMore.md

@@ -0,0 +1,227 @@
+## ReadMore 展开阅读更多 <to-api/>
+
+<demo-model url="/pages/componentsC/readMore/readMore"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-read-more**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-read-more)
+
+:::
+
+该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 直接通过slot传入正文内容。
+- 使用`showHeight`可以配置一个高度，单位可以是`px`或`rpx`，默认`400px`。内容高度超出该值，才会出现“展开阅读全文”按钮。
+- 设置属性`toggle`为`true`或`false`，默认`true`，可以配置展开后是否显示收起的按钮。
+
+```vue
+<template>
+	<uv-read-more show-height="200rpx" :toggle="true">
+		<view class="content">
+			<view>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</view>
+			<view>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</view>
+			<view>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</view>
+			<view>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</view>
+			<view>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</view>
+		</view>
+	</uv-read-more>
+</template>
+<style scoped>
+	.content {
+		padding: 0 30rpx;
+	}
+</style>
+```
+
+### 配合解析器使用
+
+- **兼容性问题处理：** 由于一些微信小程序平台的渲染能力的问题，在解析[uv-parse](/components/parse.html)组件内容时会比较耗时，导致`read-more`组件内部无法准确得知内容的高度，而出现计算错误，这种情况下，我们需要借助`uv-parse`组件的`@load`(**内容多为文字时**)或者`@ready`(**内容多为图片时，可能会有较大延时**)事件，通过`ref`重新初始化`read-more`组件的高度，如下：
+- 如果因为内容图片较多，可以再在`@ready`回调中适当的给个延迟，这样就可以保证展开完整显示。
+
+```vue
+<template>
+	<uv-read-more ref="readMore">
+		<uv-parse class="content" :content="content" @ready="ready"></uv-parse>
+	</uv-read-more>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const readMore = ref(null);
+const content = ref(`<p class="content">
+					<p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p>
+					<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</p>
+					<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
+					<p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</p>
+					<p>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
+					<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
+					<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
+					<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
+					<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
+					<p>译文：丙辰年的中秋节，高兴地喝酒直到第二天早晨，喝到大醉，写了这首词，同时思念弟弟苏辙。明月从什么时候才开始出现的？我端起酒杯遥问苍天。不知道在天上的宫殿，何年何月。我想要乘御清风回到天上，又恐怕在美玉砌成的楼宇，受不住高耸九天的寒冷。翩翩起舞玩赏着月下清影，哪像是在人间。月儿转过朱红色的楼阁，低低地挂在雕花的窗户上，照着没有睡意的自己。明月不该对人们有什么怨恨吧，为什么偏在人们离别时才圆呢？人有悲欢离合的变迁，月有阴晴圆缺的转换，这种事自古来难以周全。只希望这世上所有人的亲人能平安健康，即便相隔千里，也能共享这美好的月光。</p>
+				</p>`);
+function ready() {
+  // 由于图片较多，可以再适当的给一个延迟
+  setTimeout(() => {
+    readMore.value.init();
+  }, 1000);
+}
+
+</script>
+<style scoped>
+	.content {
+		line-height: 48rpx;
+		padding: 0 30rpx;
+	}
+</style>
+```
+
+### 异步初始化
+
+有时候需要展示的内容是从后端获取的，组件内部的`onLoad`生命周期初始化时，请求尚未回来，会导致内容的高度在初始化有误差。可以在请求完毕渲染后通过 `nextTick()` 等待页面更新，再通过模板 `ref` 调用组件的 `init` 方法重新初始化。
+
+```vue
+<template>
+	<uv-read-more show-height="200px" :toggle="false" ref="readMore">
+		<rich-text class="content" :nodes="content"></rich-text>
+	</uv-read-more>
+</template>
+<script setup>
+import { nextTick, ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+const readMore = ref(null);
+const content = ref('');
+const getContent = ref(`<p class="content">
+					<p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p>
+					<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</p>
+					<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
+					<p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</p>
+					<p>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
+					<p>译文：丙辰年的中秋节，高兴地喝酒直到第二天早晨，喝到大醉，写了这首词，同时思念弟弟苏辙。明月从什么时候才开始出现的？我端起酒杯遥问苍天。不知道在天上的宫殿，何年何月。我想要乘御清风回到天上，又恐怕在美玉砌成的楼宇，受不住高耸九天的寒冷。翩翩起舞玩赏着月下清影，哪像是在人间。月儿转过朱红色的楼阁，低低地挂在雕花的窗户上，照着没有睡意的自己。明月不该对人们有什么怨恨吧，为什么偏在人们离别时才圆呢？人有悲欢离合的变迁，月有阴晴圆缺的转换，这种事自古来难以周全。只希望这世上所有人的亲人能平安健康，即便相隔千里，也能共享这美好的月光。</p>
+				</p>`);
+onLoad(async () => {
+  // 模拟后端请求
+  content.value = await getData();
+  ;
+  nextTick(() => {
+    readMore.value.init();
+  });
+});
+function getData() {
+  uni.showLoading({
+    title: '加载中...'
+  });
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(getContent.value);
+      uni.hideLoading();
+    }, 1000);
+  });
+}
+
+</script>
+<style scoped>
+	.content {
+		line-height: 48rpx;
+		padding: 0 30rpx;
+	}
+</style>
+```
+
+### 自定义样式
+
+- 此组件上边部分有一个白色虚化的阴影，用以将点击区域与文字内容进行融合，如果您不想要这个阴影，可以调整`shadowStyle`对象，此对象内部如下：
+- 如果您不想要阴影，将`backgroundImage`设置为`none`即可，关于`paddingTop`和`marginTop`自行调整至合适数值即可。
+
+```vue
+<template>
+	<uv-read-more show-height="200rpx" :shadowStyle="shadowStyle">
+		<view class="content">
+			<view>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</view>
+			<view>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</view>
+			<view>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</view>
+			<view>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</view>
+			<view>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</view>
+		</view>
+	</uv-read-more>
+</template>
+<script setup>
+import { computed } from 'vue';
+
+const shadowStyle = computed(() => {
+  return {
+    // #ifndef APP-NVUE
+    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
+    // #endif
+    // #ifdef APP-NVUE
+    // nvue上不支持设置复杂的backgroundImage属性
+    backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
+    // #endif
+    paddingTop: "100px",
+    marginTop: "-100px"
+  };
+});
+
+</script>
+<style scoped>
+	.content {
+		padding: 0 30rpx;
+	}
+</style>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### ReadMore Props
+
+| 参数			| 说明										| 类型					| 默认值			|  可选值	|
+|:-				|:-											|:-						|:-				|:-			|
+| showHeight	| 内容超出此高度才会显示展开全文按钮，单位rpx	| String &#124; Number	| 400			| -			|
+| toggle		| 展开后是否显示收起按钮						| Boolean				| false		| true &#124;false	|
+| closeText		| 关闭时的提示文字							| String				| 展开阅读全文	| -			|
+| openText		| 展开时的提示文字							| String				| 收起			| -			|
+| color			| 提示文字的颜色								| String				| #2979ff		| -			|
+| fontSize		| 提示文字的大小，默认单位px					| String &#124; Number	| 14			| -			|
+| shadowStyle	| 对阴影的自定义处理，对象形式					| Object				| 见上方说明		| -			|
+| textIndent	| 段落首行缩进的字符个数						| String				| 2em			| -			|
+| name			| 用于在`open`和`close`事件中当作回调参数返回	| String &#124; Number	| -				| -			|
+
+### ReadMore Methods
+
+| 名称	| 说明																							|
+|:-		|:-																								|
+| init	| 重新初始化组件内部高度计算过程，如果内嵌[uv-parse](/components/parse.html)组件时可能需要用到			|
+
+### ReadMore Events
+
+| 事件名| 说明				| 回调参数							|
+| :-	| :-				| :-								|
+| @open	| 内容被展开时触发	| name - props中传入的`name`参数值	|
+| @close	| 内容被收起时触发	| name - props中传入的`name`参数值	|
+
+
+<style scoped>
+h3[id=readmore-methods] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>

package/docs/components/resource.md

@@ -0,0 +1,17 @@
+# 资源下载
+
+这里记录 uv-ui 相关设计资源和框架资源下载入口。
+
+## 设计资源
+
+| 资源 | 说明 | 下载 |
+| --- | --- | --- |
+| Sketch Template | Sketch 组件库资源，适用于交互设计阶段调用常用组件。 | [下载](https://mp-31ed6237-7b7b-4597-8448-a53d6d6031cf.cdn.bspapp.com/cloudstorage/28c31690-f062-4b44-ab4c-695222a21d13.sketch) |
+| Axure Template | Axure 组件库资源，适用于交互设计阶段调用常用组件。 | [下载](https://mp-31ed6237-7b7b-4597-8448-a53d6d6031cf.cdn.bspapp.com/cloudstorage/f2447df2-6d07-4f60-b25a-d739fb014e54.rp) |
+
+## 框架资源
+
+| 资源 | 说明 | 下载 |
+| --- | --- | --- |
+| Empty 组件配套占位图 | 缺省图资源，包含图片和 Sketch 源文件。 | [下载](https://mp-31ed6237-7b7b-4597-8448-a53d6d6031cf.cdn.bspapp.com/cloudstorage/108d0ada-8117-45ff-ad51-09eb6b057fa7.zip) |
+| uv-ui icon | 基于字体的图标集。 | [下载](https://mp-31ed6237-7b7b-4597-8448-a53d6d6031cf.cdn.bspapp.com/uvui/font_4150758_qns1usrtuqh.zip) |

package/docs/components/scrollList.md

@@ -0,0 +1,218 @@
+## ScrollList 横向滚动列表 <to-api/>
+
+<demo-model url="/pages/componentsC/scrollList/scrollList"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-scroll-list**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-scroll-list)
+
+:::
+
+该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表，往往数量不确定，数量较多支持左右滚动。灵活配置，开箱即用。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+:::warning 注意事项
+
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+1. 本组件如果在其他组件（eg：`uv-vtabs`、`uv-popup`等组件）中使用，可以给外层套一个view标签进行控制宽度，这样就能保证组件内部计算无误，否则可能会出现被截取的现象。
+:::
+
+### 基本使用
+
+```vue
+<template>
+	<uv-scroll-list>
+		<view v-for="(item, index) in list" :key="index">
+			<image :src="item.image" mode="heightFix" style="height: 200px;"></image>
+		</view>
+	</uv-scroll-list>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  image: "https://via.placeholder.com/200x200.png/3c9cff/fff"
+}, {
+  image: "https://via.placeholder.com/200x200.png/f9ae3d/fff"
+}, {
+  image: "https://via.placeholder.com/200x200.png/5ac725/fff"
+}, {
+  image: "https://via.placeholder.com/200x200.png/f56c6c/fff"
+}, {
+  image: "https://via.placeholder.com/200x200.png/909399/fff"
+}]);
+
+</script>
+```
+
+### 指示器的使用
+
+- `indicator` 用于控制指示器是否显示
+- `indicatorWidth` 用于控制指示器整体的宽度
+- `indicatorBarWidth` 用于控制指示器滑块的宽度
+- `indicatorColor` 指示器的颜色
+- `indicatorActiveColor` 滑块的颜色
+- `indicatorStyle` 指示器的位置/样式控制
+
+```vue
+<template>
+	<uv-scroll-list :indicator="true" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
+		<view v-for="(item, index) in list" :key="index">
+			<image :src="item.image" mode="heightFix" style="height: 200px;"></image>
+		</view>
+	</uv-scroll-list>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  image: "https://via.placeholder.com/200x200.png/3c9cff/fff"
+}, {
+  image: "https://via.placeholder.com/200x200.png/f9ae3d/fff"
+}, {
+  image: "https://via.placeholder.com/200x200.png/5ac725/fff"
+}, {
+  image: "https://via.placeholder.com/200x200.png/f56c6c/fff"
+}, {
+  image: "https://via.placeholder.com/200x200.png/909399/fff"
+}]);
+
+</script>
+```
+
+### 兼容性与性能
+
+- 此组件是在`nvue`中引入`bindingx`，此库类似于微信小程序`wxs`，目的是让`js`运行在视图层，减少视图层和逻辑层的通信折损，在`nvue`中会有更好的体验。
+- 此组件是在`APP-VUE`、`H5`、小程序中使用的是`wxs`。
+- 其他平台则使用`js`完成。
+
+当滑动到最左边/最右边时，uv-ui提供了事件`left`和`right`可供调用，用于对列表滑动到端点处的业务实现。
+
+```vue
+<template>
+	<uv-scroll-list @right="right" @left="left">
+		<view class="scroll-list" style="flex-direction: row;">
+			<view 
+				class="scroll-list__goods-item" 
+				v-for="(item, index) in list" 
+				:key="index" 
+				:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
+			>
+				<image class="scroll-list__goods-item__image" :src="item.image"></image>
+				<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
+			</view>
+			<view class="scroll-list__show-more">
+				<text class="scroll-list__show-more__text">查看更多</text>
+			</view>
+		</view>
+	</uv-scroll-list>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  price: '230.5',
+  image: 'https://via.placeholder.com/60x60.png/3c9cff/fff'
+}, {
+  price: '74.1',
+  image: 'https://via.placeholder.com/60x60.png/f9ae3d/fff'
+}, {
+  price: '8457',
+  image: 'https://via.placeholder.com/60x60.png/5ac725/fff'
+}, {
+  price: '1442',
+  image: 'https://via.placeholder.com/60x60.png/f56c6c/fff'
+}, {
+  price: '541',
+  image: 'https://via.placeholder.com/60x60.png/909399/fff'
+}, {
+  price: '234',
+  image: 'https://via.placeholder.com/60x60.png/3c9cff/fff'
+}, {
+  price: '562',
+  image: 'https://via.placeholder.com/60x60.png/f9ae3d/fff'
+}, {
+  price: '251.5',
+  image: 'https://via.placeholder.com/60x60.png/5ac725/fff'
+}]);
+function left() {
+  console.log('left');
+}
+function right() {
+  console.log('right');
+}
+
+</script>
+<style lang="scss">
+	@mixin flex($direction: row) {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: $direction;
+	}
+	.scroll-list {
+		@include flex(column);
+		&__goods-item {
+			margin-right: 20px;
+			&__image {
+				width: 60px;
+				height: 60px;
+				border-radius: 4px;
+			}
+			&__text {
+				color: #f56c6c;
+				text-align: center;
+				font-size: 12px;
+				margin-top: 5px;
+			}
+		}
+		&__show-more {
+			background-color: #fff0f0;
+			border-radius: 3px;
+			padding: 3px 6px;
+			@include flex(column);
+			align-items: center;
+			&__text {
+				font-size: 12px;
+				width: 12px;
+				color: #f56c6c;
+				line-height: 16px;
+			}
+		}
+	}
+</style>
+```
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### ScrollList Props
+
+| 参数					| 说明											| 类型					| 默认值		|  可选值	|
+|:-						|:-												|:-						|:-			|:-			|
+| indicatorWidth		| 指示器的整体宽度								| String &#124; Number	| 50		| -			|
+| indicatorBarWidth		| 滑块的宽度										| String &#124; Number	| 20		| -			|
+| indicator				| 是否显示面板指示器								| Boolean				| true		| false		|
+| indicatorColor		| 指示器非激活颜色								| String				| #f2f2f2	| -			|
+| indicatorActiveColor	| 指示器滑块颜色									| String				| #3c9cff	| -			|
+| indicatorStyle		| 指示器样式，可通过bottom，left，right进行定位	| String &#124; Object	| -			| -			|
+
+### ScrollList Events
+
+| 事件名| 说明				| 回调参数	|
+| :-	| :-				| :-		|
+| @left	| 滑动到左边时触发	| -			|
+| @right	| 滑动到右边时触发	| -			|

package/docs/components/search.md

@@ -0,0 +1,160 @@
+## Search 搜索 <to-api/>
+
+<demo-model url="/pages/componentsB/search/search"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-search**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-search)
+
+:::
+
+搜索组件，集成了常见搜索框所需功能，用户可以一键引入，自定义内容，开箱即用。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 通过`placeholder`参数设置占位内容
+- 通过`v-model`双向绑定一个**变量**值，设置初始化时搜索框的值，如果初始内容为空，那么请绑定一个值为空字符的变量。
+
+**说明：** 因为是双向绑定的，所以当组件内容输入框内容变化时，也会实时的反映到绑定的`keyword`变量，这意味着，您**无需**监听`change`事件，
+也能实时的得知输入框的内容。
+
+```vue
+<template>
+	<uv-search placeholder="请输入搜索内容" v-model="keyword"></uv-search>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const keyword = ref('水调歌头');
+
+</script>
+```
+
+### 设置输入框形状
+
+通过`shape`设置输入框两端的形状，`square`-方形带圆角，`round`(默认)-半圆形
+
+```vue
+<uv-search shape="round"></uv-search>
+```
+
+### 是否开启清除控件
+
+`clearabled`(默认为`true`)设置为`true`的话，输入框有内容时，右边会显示一个清除的图标
+
+```vue
+<uv-search :clearabled="true"></uv-search>
+```
+
+### 是否开启右边控件
+
+该控件为类似按钮形式，可以设置为"搜索"或者"取消"等内容，如果开启动画效果，用户确认搜索后，该控件会自动消失
+
+- `showAction`配置是否开启右边按钮控件
+- `actionText`配置控件内容
+- `animation`(默认为`false`)设置为`true`的话，失去焦点，或者点击控件按钮时，控件自动消失，并且带有动画效果
+
+::: warning 说明
+1. 如果不想点击右侧控件时自动消失，请把`animation`设置为`false`
+2. 右侧控件的默认文字为"搜索"(它本意为控件，碰巧内容为"搜索"二字，并非说它就是一个搜索按钮)，点击它的时候触发的是`custom`事件，而不是`search`事件
+:::
+
+```vue
+<uv-search :showAction="true" actionText="搜索" :animation="true"></uv-search>
+```
+
+### 自定义样式
+
+- 通过`inputAlign`设置输入框内容的对其方式，和css的`text-align`同理
+- 通过`borderColor`设置整个搜索组件的边框，只要配置了颜色，才会出现边框
+- 通过`height`设置组件高度
+- 通过`disabled`设置是否禁用输入框
+- 通过`bgColor`设置是搜索组件背景颜色
+
+```vue
+<uv-search inputAlign="center" height="70"></uv-search>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Search Props
+
+| 参数					| 说明					| 类型					| 默认值		|  可选值	|
+|:-						|:-						|:-						|:-			|:-			|
+| value / v-model			| 双向绑定输入框搜索值																| String				| -				| -				|
+| shape				| 搜索框形状，round-圆形，square-方形													| String				| round			| round &#124; square		|
+| bgColor			| 搜索框背景颜色																		| String				| #f2f2f2		| -				|
+| placeholder		| 占位文字内容																		| String				| 请输入关键字	| -				|
+| clearabled		| 是否启用清除控件																	| Boolean				| true			| true &#124; false			|
+| focus				| 是否自动获得焦点																	| Boolean				| false			| true &#124; false		|
+| showAction		| 是否显示右侧控件(右侧的"搜索"按钮)													| Boolean				| true			| true &#124; false			|
+| actionStyle		| 右侧控件的样式，对象形式															| Object				| -				| -				|
+| actionText		| 右侧控件文字																		| String				| 搜索			| -				|
+| inputAlign		| 输入框内容水平对齐方式																| String				| left			| center &#124; right|
+| inputStyle		| 自定义输入框样式，对象形式															| Object				| -				| -				|
+| disabled			| 是否启用输入框																		| Boolean				| false			| true &#124; false			|
+| borderColor		| 边框颜色，配置了颜色，才会有边框													| String				| transparent	| -				|
+| searchIconColor	| 搜索图标的颜色，默认同输入框字体颜色												| String				| #909399		| -				|
+| searchIconSize	| 搜索图标的大小                   												| Number				| 22		| -				|
+| color				| 输入框字体颜色																		| String				| #606266		| -				|
+| placeholderColor	| placeholder的颜色																	| String				| #909399		| -				|
+| searchIcon		| 输入框左边的图标，可以为uv-ui图标名称或图片路径										| String				| search		| -				|
+| margin			| 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法	| String				| 0				| -				|
+| animation			| 是否开启动画，见上方说明															| Boolean				| false			| true &#124; false			|
+| value				| 输入框初始值																		| String				| -				| -				|
+| maxlength			| 输入框最大能输入的长度，-1为不限制长度												| String &#124; Number	| -1			| -				|
+| height			| 输入框高度，单位rpx																| String &#124; Number	| 64			| -				|
+| label				| 搜索左侧文本信息																	| String &#124; Number	| -				| -				|
+| boxStyle<Badge text="1.0.6" /> | 自定义输入框部分的样式 | Object | - | - |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+
+### Search Events
+
+您可以通过监听`change`事件，在回调中将返回的结果绑定一个变量去获得用户的输入内容。  
+但如"基本使用"中的说明一样，您双向绑定了一个变量后，无需监听`change`事件也是可以的。
+
+| 事件名| 说明																	| 回调参数			|
+| :-	| :-																	| :-				|
+| @change| 输入框内容发生变化时触发												| value：输入框的值	|
+| @search| 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发		| value：输入框的值	|
+| @custom| 用户点击右侧控件时触发													| value：输入框的值	|
+| @blur	| 输入框失去焦点时触发													| value：输入框的值	|
+| @focus	| 输入框获得焦点时触发													| value：输入框的值	|
+| @clear	| 配置了`clearabled`后，清空内容时会发出此事件							| -					|
+| @click	| `disabled`为`true`时，点击输入框，发出此事件，用于跳转搜索页				| -					|
+| @clickIcon	| 左侧icon点击时候时触发		                            		| -					|
+
+### Search Slots
+
+|名称 | 说明 |
+|:- |:-	|
+| prefix<Badge text="1.0.6" /> | 前置插槽，可替换输入框前面的图标等场景 |
+| suffix<Badge text="1.0.6" /> | 后置插槽，可在输入框后面增加按钮等场景 |
+
+<style scoped>
+h3[id=search-events] + p + table thead tr th:nth-child(2){
+	width: 40%;
+}
+h3[id=search-slots] + table thead tr th:nth-child(2)
+{
+	width: 80%;
+}
+</style>