@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/codeInput.md

@@ -0,0 +1,175 @@
+## CodeInput 验证码输入 <to-api/>
+
+<demo-model url="/pages/componentsC/codeInput/codeInput"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-code-input**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-code-input)
+
+:::
+
+该组件一般用于验证用户短信验证码的场景，也可以结合uv-ui的[键盘组件](https://www.uvui.cn/components/keyboard.html)使用
+
+注意：需要自定义键盘`disabledKeyboard`属性必须为`true`
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 通过`mode`参数模式，可取如下值：
+- `box`(默认) - 输入位置位一个方框
+- `line` - 底部显示一条横线
+
+```vue
+<template>
+	<view>
+		<uv-code-input v-model="value" @change="change" @finish="finish"></uv-code-input>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(12);
+function change(e) {
+  console.log('内容改变，当前值为：' + e);
+}
+function finish(e) {
+  console.log('输入结束，当前值为：' + e);
+}
+
+</script>
+```
+
+### 横线模式
+
+- 通过`mode="line"`可设置显示为横线模式
+
+```vue
+<uv-code-input mode="line" :hairline="true"></uv-code-input>
+```
+
+### 设置长度
+
+- 通过`maxlength`参数配置可输入的方框个数，如6位验证码，该值设置为6即可
+
+```vue
+<uv-code-input :maxlength="6"></uv-code-input>
+```
+
+### 横线间距
+
+- 通过`space`可设置间距
+
+```vue
+<uv-code-input :space="2" ></uv-code-input>
+```
+
+### 细边框
+
+- 通过`hairline`可设置细边框
+
+```vue
+<uv-code-input mode="box" :space="0" :maxlength="4" hairline></uv-code-input>
+```
+
+### 调整颜色
+
+- 通过`color`和`borderColor`可设置颜色
+
+```vue
+<uv-code-input hairline color="#f56c6c" borderColor="#f56c6c"></uv-code-input>
+```
+
+### 用"●"替代输入内容
+
+`dot`参数配置后，输入内容将不可见，用点替代，事件回调中会返回真实值
+
+```vue
+<uv-code-input mode="box" dot></uv-code-input>
+```
+
+### 是否自动获取焦点
+
+如果需要一打开页面，就自动弹出键盘获取焦点，请配置`focus`值为`true`，否则需要用户手动点击输入区域才能唤起键盘
+
+```vue
+<uv-code-input :focus="true"></uv-code-input>
+```
+
+### 禁止唤起系统键盘
+
+uv-ui有[键盘](/components/keyboard.html)组件，如果您想结合键盘组件进行自定义的输入效果，就需要设置`disabled-keyboard`为`true`，来保证点击
+输入框时不会触发系统自带的键盘，否则会造成冲突。
+
+### 事件回调
+
+- 每当输入内容发生改变，会回调一个`change`事件，内容为当前输入的字符串，如"395"
+- 当输入的内容长度(字符个数)达到`maxlength`值后，会触发`finish`事件，同时也会触发`change`事件
+
+```vue
+<template>
+	<view>
+		<uv-code-input @change="change" @finish="finish"></uv-code-input>
+	</view>
+</template>
+<script setup>
+function change(e) {
+  console.log('内容改变，当前值为：' + e);
+}
+function finish(e) {
+  console.log('输入结束，当前值为：' + e);
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### CodeInput Props
+
+| 参数				| 说明							| 类型				| 默认值		|  可选值					|
+|:-					|:-								|:-					|:-			|:-							|
+| value / v-model				| 预置值							| String &#124; Number	| -			| -							|
+| adjustPosition | 键盘弹起时，是否自动上推页面   	| Boolean	| true		          	| true &#124; false		|
+| maxlength			| 输入字符个数					| String &#124; Number	| 6			| -							|
+| dot				| 是否用圆点填充					| Boolean			| false		| true	&#124; false					|
+| mode				| 模式选择，见上方"基本使用"说明	| String			| box		| box &#124; line	|
+| hairline			| 是否细边框						| Boolean			| false		| true &#124; false						|
+| space				| 字符间的距离					| String &#124; Number	| 10		| -							|
+| focus				| 是否自动获取焦点				| Boolean			| false		| true &#124; false						|
+| bold				| 字体和输入横线是否加粗			| Boolean			| false		| true	&#124; false					|
+| color				| 字体颜色						| String			| #606266	| -							|
+| fontSize			| 字体大小，单位rpx				| String &#124; Number	| 18		| -							|
+| size				| 输入框的大小，宽等于高			| String &#124; Number	| 35		| -							|
+| disabledKeyboard	| 禁止点击输入框唤起系统键盘，自定义键盘改值必须为`true`		| Boolean			| false		| true &#124; false						|
+| borderColor		| 边框和线条颜色					| String			| #c9cacc	| -							|
+| disabledDot		| 是否禁止输入"."符号				| Boolean			| true	    | true &#124; false						|
+
+### CodeInput Events
+
+| 事件名| 说明											| 回调参数				|
+| :-	| :-											| :-					|
+| @change| 输入内容发生改变时触发，具体见上方说明			| value：当前输入的值		|
+| @finish| 输入字符个数达`maxlength`值时触发，见上方说明		| value：当前输入的值		|
+
+<style scoped>
+h3[id=codeinput-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+</style>
+

package/docs/components/collapse.md

@@ -0,0 +1,250 @@
+## Collapse 折叠面板 <to-api/>
+
+<demo-model url="/pages/componentsC/collapse/collapse"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-collapse > uv-collapse-item**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-collapse)
+
+:::
+
+通过折叠面板收纳内容区域，手风琴模式，简单配置控制面状态
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+```vue
+<template>
+	<uv-collapse @change="change" @close="close" @open="open">
+		<uv-collapse-item title="文档指南" name="Docs guide">
+			<text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
+		</uv-collapse-item>
+		<uv-collapse-item title="组件全面" name="Variety components">
+			<text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+		</uv-collapse-item>
+		<uv-collapse-item title="众多利器" name="Numerous tools">
+			<text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
+		</uv-collapse-item>
+	</uv-collapse>
+</template>
+<script setup>
+function open(e) {
+  console.log('open', e);
+}
+function close(e) {
+  console.log('close', e);
+}
+function change(e) {
+  console.log('change', e);
+}
+
+</script>
+```
+
+### 异步加载数据
+
+组件展开的高度是内部通过js进行计算，在异步加载数据且渲染完成之后，再次调用 `init` 重新初始化内部高度，只有这样展开的高度才能完整显示内容。
+
+```vue
+<template>
+	<uv-collapse ref="collapse">
+		<uv-collapse-item title="文档指南" name="Docs guide">
+			<text class="uv-collapse-content">{{text1}}</text>
+		</uv-collapse-item>
+		<uv-collapse-item title="组件全面" name="Variety components">
+			<text class="uv-collapse-content">{{text2}}</text>
+		</uv-collapse-item>
+		<uv-collapse-item title="众多利器" name="Numerous tools">
+			<text class="uv-collapse-content">{{text3}}</text>
+		</uv-collapse-item>
+	</uv-collapse>
+</template>
+<script setup>
+import { nextTick, ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+const collapse = ref(null);
+const text1 = ref('');
+const text2 = ref('');
+const text3 = ref('');
+onLoad(() => {
+  // 模拟请求
+  uni.showLoading({
+    title: '请求中',
+    mask: true
+  });
+  setTimeout(() => {
+    text1.value = '涵盖uniapp各个方面，给开发者方向指导和设计理念';
+    text2.value = '组件功能丰富，多端兼容。让您快速集成，开箱即用';
+    text3.value = '众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨';
+    nextTick(() => {
+      // 再次调用 init 重新初始化内部高度
+      collapse.value.init();
+      uni.showToast({
+        icon: 'success',
+        title: '请求成功'
+      });
+      uni.hideLoading();
+    });
+  }, 1000);
+});
+
+</script>
+```
+
+### 控制面板的初始状态，以及是否可以操作
+
+- 通过`uv-collapse-item`的`name`属性，并在`uv-collapse`中指定数组`value`可以让面板初始化时为打开状态
+- 通过`uv-collapse-item`的`disabled`属性，设置是否禁用
+
+```vue
+<template>
+	<uv-collapse :value="['2']">
+		<uv-collapse-item title="文档指南">
+			<text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
+		</uv-collapse-item>
+		<uv-collapse-item disabled title="组件全面">
+			<text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+		</uv-collapse-item>
+		<uv-collapse-item name="2" title="众多利器">
+			<text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
+		</uv-collapse-item>
+	</uv-collapse>
+</template>
+```
+
+### 手风琴模式
+
+通过`uv-collapse`的`accordion`属性设置为`true`，这样可以开启手风琴模式
+
+```vue
+<template>
+	<uv-collapse accordion>
+		<uv-collapse-item title="文档指南">
+			<text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
+		</uv-collapse-item>
+		<uv-collapse-item title="组件全面">
+			<text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+		</uv-collapse-item>
+		<uv-collapse-item title="众多利器">
+			<text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
+		</uv-collapse-item>
+	</uv-collapse>
+</template>
+```
+
+### 自定义标题和内容
+
+通过设置`slot`来自定义标题和内容
+
+::: warning 注意
+
+微信小程序不支持`<slot slot="title"><slot name="title"></slot></slot>`写法，微信小程序暂不支持自定义标题和内容。
+
+:::
+
+```vue
+<template>
+	<view class="uv-page__item">
+		<uv-collapse accordion>
+			<uv-collapse-item title="文档指南">
+				<text slot="title" class="uv-page__item__title__slot-title">文档指南</text>
+				<text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
+			</uv-collapse-item>
+			<uv-collapse-item title="组件全面">
+				<uv-icon name="tags-fill" size="20" slot="icon"></uv-icon>
+				<text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+			</uv-collapse-item>
+			<uv-collapse-item title="众多利器">
+				<text slot="value" class="uv-page__item__title__slot-title">自定义内容</text>
+				<text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器</text>
+			</uv-collapse-item>
+		</uv-collapse>
+	</view>
+</template>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+### Collapse Props
+
+| 参数 | 说明 | 类型	| 默认值 | 可选值 |
+|:- |:- |:- |:-	|:- |
+| value | 当前展开面板`uv-collapse-item`属性`name`，非手风琴模式必须为数组，eg：['2']。手风琴模式为字符串或数字。 	| String &#124; Number &#124;  Array| -		| -			|
+| accordion	| 是否手风琴模式																					| Boolean							| false	| true &#124; false		|
+| border	| 是否显示外边框																					| Boolean							| true	| true &#124; false		|
+
+### CollapseItem Props
+
+| 参数          | 说明            | 类型            | 默认值             |  可选值   |
+|-------------  |---------------- |---------------|------------------ |-------- |
+| title | 面板标题  | String | - | - |
+| value | 标题右侧内容  | String | - | - |
+| label | 标题下方的描述信息  | String | - | - |
+| disabled | 是否禁止面板的展开和收起  | Boolean | false | true &#124; false |
+| isLink | 是否展示右侧箭头并开启点击反馈  | Boolean | true | true &#124; false |
+| clickable | 是否开启点击反馈  | Boolean | true | true &#124; false |
+| border | 是否显示内边框  | Boolean | true | true &#124; false |
+| name | 唯一标识符。如不设置，默认用当前`collapse-item`的索引值 | String &#124; Number | - | - |
+| icon | 标题左侧图标，可为绝对路径的图片或内置图标 | String | - | - |
+| duration | 面板展开收起的过渡时间，单位`ms` | Number | 300 | - |
+
+### Collapse Events
+
+注意：请在`<uv-collapse></uv-collapse>`上监听此事件
+
+|事件名	|说明																			|回调参数							|
+|:-		|:-																				|:-									|
+| @change| 当前激活面板展开/关闭时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)	| activeNames: String &#124;  Array	|
+| @open	| 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)	| activeNames: String &#124;  Array	|
+| @close	| 当前激活面板关闭时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)	| activeNames: String &#124;  Array	|
+
+
+### Collapse Methods 
+
+注意：此方法需要通过`ref`调用
+
+| 方法	| 说明																		|
+|:-		|:-																			|
+| init	| 重新初始化内部高度计算，用于异步获取内容的情形，请结合 Vue 3 `nextTick()` 使用		|
+
+### CollapseItem Slots
+
+微信小程序不支持`slot`写法
+
+| 名称		| 说明			|
+|:-			|:-				|
+| -			| 主体部分的内容	|
+| title		| 标题内容		|
+| icon		| 左侧icon			|
+| value		| 右侧value		|
+| right-icon	| 右侧icon		|
+
+
+<style scoped>
+h3[id=collapse-events] + p + table thead tr th:nth-child(2){
+	width: 60%;
+}
+h3[id=collapse-events] + p + table thead tr th:nth-child(3){
+	width: 25%;
+}
+h3[id=collapse-methods] + p +table thead tr th:nth-child(2),
+h3[id=collapseitem-slots] + p +table thead tr th:nth-child(2) {
+	width: 70%;
+}
+</style>