@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/keyboard.md

@@ -0,0 +1,226 @@
+## Keyboard 键盘 <to-api/>
+
+<demo-model url="/pages/componentsB/keyboard/keyboard"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-keyboard**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-keyboard)
+
+:::
+
+此为uv-ui自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+通过`mode`参数定义键盘的类型，通过`ref`调用`open()`控制组件的打开和关闭：
+- `mode = "car"`  (默认值)为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"
+- `mode = "number"`为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
+- `mode = "card"` 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"
+
+```vue
+<template>
+	<view>
+		<uv-keyboard ref="keyboard" mode="car" @change="change" @confirm="confirm"></uv-keyboard>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const keyboard = ref(null);
+function open() {
+  keyboard.value.open();
+}
+function change(e) {
+  console.log('change', e);
+}
+function confirm() {
+  console.log('confirm');
+}
+
+</script>
+```
+
+### 隐藏键盘"."符号
+
+- 通过`dotDisabled`参数配置是否显示键盘"."符号，默认为`false`，只在`mode = "number"`时生效
+
+```vue
+<uv-keyboard ref="keyboard" mode="number" :dotDisabled="true"></uv-keyboard>
+```
+
+### 是否打乱按键的顺序
+
+如果配置`random`参数为`true`的话，**每次**打开键盘，按键的顺序都是随机的，该功能默认是关闭的
+
+```vue
+<uv-keyboard ref="keyboard" mode="number" random></uv-keyboard>
+```
+
+### 监听键盘按键被点击
+
+- 输入值是通过组件的`change`事件实现的，组件内部每个按键被点击的时候，组件就会发出一个`change`事件，回调参数为点击的按键的值  
+- 通过`backspace`事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果，见下方示例
+
+注意：点击退格键(也即删除键)不会触发`change`事件
+
+```vue
+<template>
+	<view>
+		<uv-keyboard ref="keyboard" mode="number" @change="change" @backspace="backspace"></uv-keyboard>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const keyboard = ref(null);
+const value = ref('');
+function open() {
+  keyboard.value.open();
+}
+function change(val) {
+  // 将每次按键的值拼接到value变量中，注意+=写法
+  value.value += val;
+  console.log(value.value);
+}
+function backspace() {
+  // 删除value的最后一个字符
+  if (value.value.length) value.value = value.value.substr(0, value.value.length - 1);
+  console.log(value.value);
+}
+
+</script>
+```
+
+### 车牌键盘自定义中英文切换及禁用键等设置
+
+- 通过 `disKeys` 属性设置禁用的键，如：['京',2,'Q','X']
+- 通过ref方法 `changeCarMode` 可以切换中英文模式
+- 通过 `@changeCarInputMode` 回调方法可以获取是否处于英文状态模式，这里的作用是自定义中英文部分的内容
+- 通过 `customabc` 属性开启自定义切换按键内容，为了兼容部分小程序
+
+```vue
+<template>
+	<view>
+		<uv-keyboard 
+		ref="keyboard" 
+		mode="car" 
+		customabc 
+		:disKeys="['京',2,'Q','X']" 
+		@change="change" 
+		@confirm="confirm" 
+		@changeCarInputMode="changeCarInputMode"
+	>
+			<template v-slot:abc>
+				<text v-if="isABC">省份</text>
+				<text v-else>ABC</text>
+			</template>
+		</uv-keyboard>
+		<button @click="open">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const keyboard = ref(null);
+const isABC = ref(false);
+function open() {
+  keyboard.value.open();
+  // setTimeout(()=>{
+  // 	keyboard.value.changeCarMode();
+  // },1000)
+}
+function change(e) {
+  console.log('change', e);
+}
+function confirm() {
+  console.log('confirm');
+}
+function changeCarInputMode(e) {
+  isABC.value = e;
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Keyboard Props
+
+
+| 参数					| 说明																								| 类型					| 默认值	| 可选值			|
+| :-					| :-																								| :-					| :-	| :-			|
+| mode					| 键盘的类型，`number` - 数字键盘，`card` - 身份证键盘，`car` - 车牌号键盘											| String				| car	| car &#124; number &#124; card	|
+| dotDisabled			| 是否显示"."按键，只在`mode="number"`时有效	| Boolean			| false	| true	&#124; false		|
+| tooltip				| 是否显示键盘顶部工具条			| Boolean			| true	| true &#124; false			|
+| showTips				| 是否显示工具条中间的提示			| Boolean				| true	| true &#124; false			|
+| tips					| 工具条中间的提示文字			| String				| -		| -				|
+| showCancel			| 是否显示工具条左边的"取消"按钮			| Boolean			| true	| true &#124; false			|
+| showConfirm			| 是否显示工具条右边的"完成"按钮			| Boolean		| true	|  true &#124; false			|
+| random				| 是否打乱键盘按键的顺序			| Boolean				| false	| true	&#124; false			|
+| safeAreaInsetBottom	| 是否开启[底部安全区适配](/guide/safeAreaInset.html#关于uv-ui某些组件safe-area-inset参数的说明)	| Boolean				| false	| true &#124; false			|
+| closeOnClickOverlay	| 是否允许点击遮罩收起键盘	| Boolean				| true	| true &#124; false			|
+| closeOnClickConfirm | 是否允许点击确认按钮收起键盘 | Boolean				| true	| true &#124; false			|
+| overlay				| 是否显示遮罩				| Boolean				| true	| true &#124; false			|
+| zIndex				| 弹出键盘的`z-index`值					| String &#124; Number 	| 1075	| -				|
+| confirmText			| 确认按钮的文字					| String				| 确认	| -				|
+| cancelText			| 取消按钮的文字						| String				| 取消	| -				|
+| autoChange			| `mode = "car"`下，输入文字后，是否自动切换为字母模式	| Boolean	| false	| true &#124; false			|
+| disKeys | `mode = "car"`下，被禁用的键，如：['I','O'] | Array | - | - |
+| customabc | `mode = "car"`下，是否启用自定义中英文切换内容模式，为了兼容支付宝等小程序不兼容嵌套插槽，导致同时显示自定义内容和原始内容 | Array | - | - |
+| customStyle			| 自定义外部样式					| Object				| {}	| -				|
+
+### Keyboard Methods
+| 方法名								| 说明					| 
+| :-								| :-					|
+| open	| 弹出键盘组件	 |
+| close	| 关闭键盘组件	 | 
+| changeCarMode | `mode = "car"`下， 调用此方法可以切换中英文模式 |
+
+### Keyboard Events
+
+| 事件名		| 说明									| 回调参数					|
+| :-		| :-									| :-						|
+| @change	| 按键被点击(不包含退格键被点击)		    	| 按键的值，见上方说明和示例	|
+| @close     | 键盘关闭								| -							|
+| @confirm	| 键盘顶部工具条右边的"完成"按钮被点击       	| -							|
+| @cancel	| 键盘顶部工具条左边的"取消"按钮被点击       	| -							|
+| @backspace	| 键盘退格键被点击					    	| -							|
+| @changeCarInputMode | `mode = "car"`下，调用此方法可以进行切换中英文 | 返回true - 英文模式；false - 中文模式 |
+
+### Keyboard slots
+
+|名称 | 说明 |
+|:- |:-	|
+| abc | `mode = "car"`下，自定义中英文切换内容，具体使用参考[上面示例]() |
+
+<style scoped>
+h3[id=keyboard-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+h3[id=keyboard-methods] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+h3[id=keyboard-slots] + table thead tr th:nth-child(2)
+{
+	width: 80%;
+}
+</style>

package/docs/components/layout.md

@@ -0,0 +1,310 @@
+## Layout 布局 <to-api/>
+
+<demo-model url="/pages/componentsA/layout/layout"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-row**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-row)
+
+:::
+
+通过基础的 12 分栏，迅速简便地创建布局  
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√(仅支持微信小程序，[原因](https://www.uvui.cn/components/problem.html#%E4%B8%83%E3%80%81uv-row%E3%80%81uv-grid%E7%AD%89%E7%BB%84%E4%BB%B6%E5%9C%A8%E7%99%BE%E5%BA%A6%E5%B0%8F%E7%A8%8B%E5%BA%8F%E3%80%81%E6%8A%96%E9%9F%B3%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AD%89%E5%B9%B3%E5%8F%B0%E6%98%BE%E7%A4%BA%E5%BC%82%E5%B8%B8))|√|√|
+
+::: warning 注意
+1、如需实现类似宫格的布局，请使用uv-ui的[Grid宫格组件](/components/grid.html)，可以设置角标，功能更完善和灵活。
+
+2、百度小程序、抖音小程序等由于不支持[将自定义节点设置成虚拟的，更加接近Vue组件的表现](https://uniapp.dcloud.net.cn/tutorial/vue-api.html#%E5%85%B6%E4%BB%96%E9%85%8D%E7%BD%AE)，所以表现可能有异常，这点需要开发时注意。
+:::
+
+### 基本使用
+
+通过`col`组件的`span`设置需要分栏的比例
+
+```vue
+<template>
+	<view>
+		<uv-row customStyle="margin-bottom: 10px">
+			<uv-col span="6">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+			<uv-col span="6">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+		</uv-row>
+		<uv-row customStyle="margin-bottom: 10px">
+			<uv-col span="4">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+			<uv-col span="4">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+			<uv-col span="4">
+				<view class="demo-layout bg-purple-dark"></view>
+			</uv-col>
+		</uv-row>
+		<uv-row justify="space-between">
+			<uv-col span="3">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+		</uv-row>
+	</view>
+</template>
+<style lang="scss">
+	.demo-layout {
+		height: 25px;
+		border-radius: 4px;
+	}
+	.bg-purple {
+		background: #CED7E1;
+	}
+	.bg-purple-light {
+		background: #e5e9f2;
+	}
+	.bg-purple-dark {
+		background: #99a9bf;
+	}
+</style>
+```
+
+### 分栏间隔
+
+通过设置`row`组件的`gutter`参数，来指定每一栏之间的间隔(最终表现为左边内边距各为gutter/2)，默认间隔为0
+
+```vue
+<template>
+	<view>
+		<uv-row justify="space-between" gutter="10">
+			<uv-col span="3">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+		</uv-row>
+	</view>
+</template>
+<style lang="scss">
+	.demo-layout {
+		height: 25px;
+		border-radius: 4px;
+	}
+	.bg-purple {
+		background: #CED7E1;
+	}
+	.bg-purple-light {
+		background: #e5e9f2;
+	}
+	.bg-purple-dark {
+		background: #99a9bf;
+	}
+</style>
+```
+
+### 混合布局
+
+通过指定`col`组件的`span`属性，指定不同的值，达到不同的比例
+
+```vue
+<template>
+	<view>
+		<uv-row justify="space-between" gutter="10">
+			<uv-col span="2">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+			<uv-col span="4">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+			<uv-col span="6">
+				<view class="demo-layout bg-purple-dark"></view>
+			</uv-col>
+		</uv-row>
+	</view>
+</template>
+<style lang="scss">
+	.demo-layout {
+		height: 25px;
+		border-radius: 4px;
+	}
+	.bg-purple {
+		background: #CED7E1;
+	}
+	.bg-purple-light {
+		background: #e5e9f2;
+	}
+	.bg-purple-dark {
+		background: #99a9bf;
+	}
+</style>
+```
+
+### 分栏偏移
+
+通过指定`col`组件的`offset`属性可以指定分栏偏移的栏数。
+
+```vue
+<template>
+	<view>
+		<uv-row justify="space-between" customStyle="margin-bottom: 10px">
+			<uv-col span="3" offset="3">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+			<uv-col span="3" offset="3">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+		</uv-row>
+		<uv-row>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+			<uv-col span="3" offset="3">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+		</uv-row>
+	</view>
+</template>
+<style lang="scss">
+	.demo-layout {
+		height: 25px;
+		border-radius: 4px;
+	}
+	.bg-purple {
+		background: #CED7E1;
+	}
+	.bg-purple-light {
+		background: #e5e9f2;
+	}
+	.bg-purple-dark {
+		background: #99a9bf;
+	}
+</style>
+```
+
+### 对齐方式
+
+通过`row`组件的`justify`来对分栏进行灵活的对齐，
+可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)，
+其最终的表现类似于css的`justify-content`属性。
+
+**注意**：由于持微信小程序编译后的特殊结构，此方式不支持微信小程序。
+
+```vue
+<template>
+	<view>
+		<uv-row justify="space-between" customStyle="margin-bottom: 10px">
+			<uv-col span="3">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+		</uv-row>
+		<uv-row>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple-light"></view>
+			</uv-col>
+			<uv-col span="3">
+				<view class="demo-layout bg-purple"></view>
+			</uv-col>
+		</uv-row>
+	</view>
+</template>
+<style lang="scss">
+	.demo-layout {
+		height: 25px;
+		border-radius: 4px;
+	}
+	.bg-purple {
+		background: #CED7E1;
+	}
+	.bg-purple-light {
+		background: #e5e9f2;
+	}
+	.bg-purple-dark {
+		background: #99a9bf;
+	}
+</style>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Row Props
+
+| 参数		| 说明									| 类型					| 默认值						|  可选值																					|
+|:-			|:-										|:-						|:-							|:-																							|
+| gutter	| 栅格间隔，左右各为此值的一半，单位任意	| String &#124; Number	| 0							| -																							|
+| justify	| 水平排列方式(微信小程序暂不支持)		| String				| `start`(或`flex-start`)	| 见下[Justify Options](/components/layout.html#justify-options)|
+| align		| 垂直排列方式							| String				| center					| top &#124; bottom																				|
+
+### Col Props
+
+| 参数		| 说明								| 类型					| 默认值		|  可选值																											|
+|:-			|:-									|:-						|:-			|:-																													|
+| span		| 栅格占据的列数，总12等分			| String &#124; Number	| 0			| 1-12																												|
+| offset	| 分栏左边偏移，计算方式与`span`相同	| String &#124; Number	| 0			| -																													|
+| justify	| 水平排列方式						| String				| start		| 见下[Justify Options](/components/layout.html#justify-options) |
+| align		| 垂直对齐方式						| String				| stretch	| top &#124; center &#124; bottom &#124; stretch																			|
+| textAlign	| 文字水平对齐方式					| String				| left		| center &#124; right																									|
+
+### Justify Options
+
+| 属性值	| 说明								|
+|:-			|:-									|
+| start (或flex-start) | 左对齐 |
+| end (或flex-end) | 右对齐 |
+| center | 居中对齐 |
+| around (或space-around)  | 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍 |
+| between (或space-between) | 两端对齐主轴的起点与终点，项目之间的间隔都相等 |
+
+### Row Events
+
+|事件名	|说明			|回调参数	|
+|:-		|:-				|:-			|
+| @click	| `row`被点击	| -			|
+
+
+### Col Events
+
+|事件名	|说明								|回调参数	|
+|:-		|:-									|:-			|
+| @click	| `col`被点击，会阻止事件冒泡到`row`	| -			|
+
+<style scoped>
+h3[id=justify-options] + table {
+	width: auto;
+}
+h3[id=justify-options] + table thead tr th:nth-child(2) {
+	width: 60%;
+}
+</style>

package/docs/components/line.md

@@ -0,0 +1,85 @@
+## Line 线条 <to-api/>
+
+<demo-model url="/pages/componentsA/line/line"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-line**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-line)
+
+:::
+
+此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。
+
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+组件内部有预置的参数，直接使用即可，有如下几个参数需要了解：
+
+- `color`为线条的颜色
+- `direction`为线条的方向，默认为横向
+- `length`参数需要特别留意，它需要带上单位，比如设置为"50%"，"500rpx"等，在线条为横向时，表现为线条的长度；在线条为竖向时，表现为线条的高度。
+
+```vue
+<template>
+	/* 基础使用 */
+	<uv-line></uv-line>
+	
+	/* 自定义颜色 */
+	<uv-line color="#2979ff"></uv-line>
+	
+	/* 自定义线条方向 */
+	<uv-line direction="col"></uv-line>
+	
+	/* 自定义线条长度 */
+	<uv-line length="50%"></uv-line>
+</template>
+```
+
+
+### 是否虚线 
+
+- `dashed`控制线条是否虚线：
+
+```vue
+<template>
+	<uv-line dashed></uv-line>
+</template>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Line Props
+
+| 参数		| 说明																		| 类型					| 默认值		|  可选值	|
+|:-			|:-																			|:-						|:-			|:-			|
+| color		| 线条的颜色																	| String				| #d6d7d9	| -			|
+| length	| 长度，竖向时表现为高度，横向时表现为长度。`direction="col"`时必须设置`length`值。		| String &#124; Number	| 100%		| -			|
+| direction	| 线条的方向，row - 横向，col - 竖向											| String				| row		| row &#124; col		|
+| hairline	| 是否显示细边框																| Boolean				| true		| true &#124; false		|
+| margin	| 线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx"，默认单位px	| String &#124; Number	| 0			| -			|
+| dashed	| 是否虚线					| Boolean				| false		| true	&#124; false	|
+| customStyle | 自定义样式 | Object | - | - |
+
+
+<style scoped>
+h3[id=props] + table thead tr th:nth-child(2){
+	width: 37%;
+}
+</style>