@gmcb/uv-ui 0.2.26 → 0.3.0

package/docs/components/slider.md

@@ -0,0 +1,157 @@
+## Slider 滑动选择器 <to-api/>
+      
+<demo-model url="/pages/componentsB/slider/slider"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-slider**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-slider)
+
+:::
+
+该组件一般用于表单中，手动选择一个区间范围的场景。
+
+**注意：** 该组件在```H5```，```微信小程序```和```APP-VUE```等平台上使用了```WXS```技术，在```NVUE```平台使用了```BindingX```技术，
+故在滑动过程中可以获得细腻流畅的跟随效果。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+需要通过`v-model`绑定一个值，来初始化滑块的选择值(0到100之间)，这个值是双向绑定的，您可以通过这个值，实时地得知内部的滑动结果。
+
+
+```vue
+<template>
+	<uv-slider v-model="value"></uv-slider>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(30);
+
+</script>
+```
+
+### 设置最大和最小值
+
+通过`min`和`max`，可以设置滑块所能选择的最大和最小值
+
+```vue
+<template>
+	<uv-slider v-model="value" min="30" max="80"></uv-slider>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(40);
+
+</script>
+```
+
+### 设置步进值
+
+通过`step`参数设置步进值，这个步进值为每次跳变的值，具体表现请见示例。  
+
+:::warning 注意
+`step`必须要被`max`值整除，否则会出现无法无法滑动到最大值的情况
+:::
+
+```vue
+<template>
+	<uv-slider v-model="value" step="10" min="30" max="100"></uv-slider>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(40);
+
+</script>
+```
+
+### 禁用状态
+
+```vue
+<template>
+	<uv-slider v-model="value" disabled></uv-slider>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(40);
+
+</script>
+```
+
+### 设置滑块和线条的样式
+
+- 通过`block-size`属性 设置滑块大小（高等于宽）
+- 通过`block-color`属性 设置滑动按钮的颜色
+- 通过`activeColor`属性 设置滑块左侧已选择部分的线条颜色
+- 通过`backgroundColor`属性 设置滑块右侧背景条的颜色		
+
+```vue
+<template>
+	<uv-slider 
+		v-model="value" 
+		block-size="30" 
+		block-color="red" 
+		backgroundColor="pink" 
+		activeColor="blue">
+	</uv-slider>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(30);
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Slider Props
+
+| 参数			| 说明							| 类型					| 默认值		|  可选值	|
+|:-				|:-								|:-						|:-			|:-			|
+| value / v-model			| 双向绑定滑块选择值				| String &#124; Number	| 0			| -			|
+| min			| 可选的最小值(0-100之间)		| String &#124; Number	| 1			| -			|
+| max			| 可选的最大值(0-100之间)		| String &#124; Number	| 100		| -			|
+| step			| 选择的步长		| String &#124; Number	| 1			| -			|
+| activeColor	| 滑块左侧已选择部分的线条颜色		| String				| #2979ff	| -			|
+| backgroundColor	| 滑块右侧背景条的颜色		| String				| #c0c4cc	| -			|
+| block-size		| 滑块的大小，取值范围为 12 - 28		| String &#124; Number				| 18		| 12 - 28		|
+| block-color	| 滑块的颜色 | String				| #ffffff	| -			|
+| show-value	| 是否显示当前 value					| Boolean				| false	| true &#124; false		|
+| blockStyle	| 滑块按钮自定义样式	| Object &#124; String	| -			| -			|
+| customStyle | 自定义外部样式 | Object | - | - |
+
+
+### Slider Events
+
+| 事件名	| 说明			| 回调参数					|
+| :-	| :-			| :-						|
+| @input| 更新v-model的（拖动过程中）	| value：当前值	|
+| @changing	| 触发事件（拖动过程中）	| value：当前值	|
+| @change	| 触发事件	| value：当前值	|
+
+
+<style >
+h3[id=slider-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+</style>

package/docs/components/steps.md

@@ -0,0 +1,189 @@
+## Steps 步骤条 <to-api/>
+
+<demo-model url="/pages/componentsD/steps/steps"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-steps > uv-steps-item**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-steps)
+
+:::
+
+该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|×|√|√|√|√|
+
+:::warning 说明
+由于安卓`nvue`下，`overflow`属性不支持`visible`值，故此组件暂不支持安卓`nvue`环境。
+:::
+
+### 基本使用
+
+- 该组件需要`uv-steps`和`uv-steps-item`配合使用
+- 通过`current`属性标识目前处于第几步，从0开始
+
+```vue
+<template>
+	<uv-steps current="0">
+		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
+		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
+		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+	</uv-steps>
+</template>
+```
+
+### 错误状态
+
+通过`uv-steps-item`的`error`属性设为`true`，当前步骤将会为“失败”的状态
+
+```vue
+<template>
+	<uv-steps current="1">
+		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
+		<uv-steps-item error title="仓库着火" desc="10:35"></uv-steps-item>
+		<uv-steps-item title="破产清算" desc="11:40"></uv-steps-item>
+	</uv-steps>
+</template>
+```
+
+### 步骤条模式
+
+通过`dot`属性设置为`true`的话，将会以点状的形式展示步骤条样式
+
+```vue
+<template>
+	<uv-steps current="1" dot>
+		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
+		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
+		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+	</uv-steps>
+</template>
+```
+
+### 竖向模式
+
+通过`direction`属性设置为`column`，组件将会以竖向的形式展示步骤条内容
+
+```vue
+<template>
+	<uv-steps current="1" direction="column">
+		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
+		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
+		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+	</uv-steps>
+</template>
+```
+
+### 自定义图标
+
+- 通过`activeIcon`属性可以设置激活状态的图标
+- 通过`inactiveIcon`属性可以设置非激活状态的图标
+
+```vue
+<template>
+	<uv-steps current="1" activeIcon="checkmark" inactiveIcon="arrow-right">
+		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
+		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
+		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+	</uv-steps>
+</template>
+```
+
+### 通过插槽自定义图标
+
+- 通过插槽`icon`自定义图标
+- 通过`inactive-color`属性设置选中前的颜色，如果通过插槽`icon`自定义图标，该颜色设置的只有线条颜色
+- 通过`active-color`属性设置选中后的颜色，如果通过插槽`icon`自定义图标，该颜色设置的只有线条颜色
+
+```vue
+<template>
+	<uv-steps current="1" active-color="#3c9cff" inactive-color="#999">
+		<uv-steps-item title="已下单" desc="09:35">
+			<template v-slot:icon>
+				<uv-icon name="checkmark" color="#3c9cff"></uv-icon>
+			</template>
+		</uv-steps-item>
+		<uv-steps-item title="已出库" desc="10:35">
+			<template v-slot:icon>
+				<uv-icon name="checkmark" color="#3c9cff"></uv-icon>
+			</template>
+		</uv-steps-item>
+		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+	</uv-steps>
+</template>
+```
+
+### 通过插槽自定义内容
+
+- 通过插槽`title`自定义标题内容
+- 通过插槽`desc`自定义描述内容
+
+```vue
+<template>
+	<uv-steps current="1">
+		<uv-steps-item>
+			<template v-slot:title>
+				<text>已下单</text>
+			</template>
+			<template v-slot:desc>
+				<text>00:00</text>
+			</template>
+		</uv-steps-item>
+		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
+		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+	</uv-steps>
+</template>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Steps Props
+
+| 参数			| 说明					| 类型					| 默认值		|  可选值	|
+|:-				|:-						|:-						|:-			|:-			|
+| direction		| `row` - 横向，`column` - 竖向	| String				| row		| row &#124; column	|
+| current		| 设置当前处于第几步		| Number &#124; String	| 0			| -			|
+| activeColor	| 激活状态颜色			| String				| #3c9cff	| -			|
+| inactiveColor	| 未激活状态颜色			| String				| #969799	| -			|
+| activeIcon	| 激活状态的图标			| String				| -			| -			|
+| inactiveIcon	| 未激活状态图标			| String				| -			| -			|
+| dot			| 是否显示点类型			| Boolean				| false		| true &#124; false		|
+| customStyle | 自定义外部样式 | Object | - |
+	
+
+### StepsItem Props
+| 参数		| 说明						| 类型					| 默认值	|  可选值	|
+|:-			|:-							|:-						|:-		|:-			|
+| title		| 标题文字					| String				| -		| -			|
+| desc		| 描述文本					| String				| -		| -			|
+| iconSize	| 图标大小，需要`uv-steps`设置`activeIcon`或`inactiveIcon`。单位`px(rpx)`		| String &#124; Number	| 17	| -			|
+| error		| 当前步骤是否处于失败状态		| Boolean				| false	| true &#124; false	|
+| customStyle | 自定义外部样式，可以利用该属性设置`padding`调整间距等场景 | Object | - |
+
+### StepsItem Slots
+
+| 名称	| 说明				|
+|:-		|:-					|
+| icon	| 自定义图标	|
+| title	| 自定义标题文字	|
+| desc	| 自定义描述文字	|
+
+<style>
+h3[id=stepsitem-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>

package/docs/components/sticky.md

@@ -0,0 +1,76 @@
+## Sticky 吸顶 <to-api/>
+
+<demo-model url="/pages/componentsD/sticky/sticky"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-sticky**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-sticky)
+
+:::
+
+该组件与CSS中`position: sticky`属性实现的效果一致，当组件达到预设的到顶部距离时，
+就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+:::tip 说明
+本组件内部通过多种手段判断当前运行环境是否支持`css sticky`，在`H5`，`APP-VUE`，`NVUE`，`MP-WEIIXN`，`安卓`
+等环境可以进行准确判断，如果支持则使用`CSS`方案，否则使用降级的`JS`方案。
+:::
+
+### 基本使用
+
+由于`css sticky`的特殊性，建议您将此组件放置在页面外层元素中，否则可能会导致`sticky`失效，以下为[MDN对sticky的解释](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position)：  
+- 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
+
+```vue
+<template>
+	<view class="container">
+		<!-- 建议放在外层 -->
+		<uv-sticky>......</uv-sticky>
+		<view class="container__inner">
+			<!-- 不建议放在层层嵌套的view中，除非您清楚知道自己为什么需要这么做 -->
+			<uv-sticky>......</uv-sticky>
+		</view>
+	</view>
+</template>
+```
+
+### 吸顶距离
+
+通过`offset-top`参数设置组件在吸顶时与顶部的距离
+
+```vue
+<uv-sticky offset-top="20">
+	<text>塞下秋来风景异，衡阳雁去无留意</text>
+</uv-sticky>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Sticky Props
+
+| 参数				| 说明									| 类型					| 默认值		|  可选值	|
+|:-					|:-										|:-						|:-			|:-			|
+| offsetTop			| 吸顶时与顶部的距离，单位`px(rpx)`				| String &#124; Number	| 0			| -			|
+| customNavHeight	| 导航栏高度，自定义导航栏时，需要传入此值	| String &#124; Number	| 0			| -			|
+| disabled			| 是否禁用吸顶功能						| Boolean				| false		| true &#124; false		|
+| bgColor			| 组件背景颜色							| String				| #ffffff	| -			|
+| zIndex			| 吸顶时的`z-index`值，`NVUE`无效			| String &#124; Number	| -			| -			|
+| index				| 自定义标识，用于区分是哪一个组件			| String &#124; Number	| -			| -			|
+

package/docs/components/subsection.md

@@ -0,0 +1,183 @@
+## Subsection 分段器 <to-api/>
+
+<demo-model url="/pages/componentsD/subsection/subsection"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-subsection**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-subsection)
+
+:::
+
+该分段器一般用于用户从几个选项中选择某一个的场景
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+::: warning 注意
+
+如果在弹窗等场景使用显示异常，需要使用v-if进行控制，详情请参考[为什么部分组件在弹出层中显示异常或功能异常](https://www.uvui.cn/components/problem.html#五、为什么部分组件在弹出层中显示异常或功能异常)
+
+:::
+
+### 基本使用
+
+- 通过`list`数组参数传递分段的选项，数组元素可为字符串，或者通过`keyName`参数传入对象(默认为`name`)
+- 通过`current`属性指定初始化时激活的选项
+
+```vue
+<template>
+	<uv-subsection :list="list" :current="current" @change="change"></uv-subsection>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref(['未付款', '待评价', '已付款']);
+const current = ref(1);
+function change(index) {
+  current.value = index;
+}
+
+</script>
+```
+
+### 模式选择
+
+通过`mode`属性设置分段器的模式
+- 值为`button`时为按钮类型，默认该值
+- 值为`subsection`时为分段器形式
+
+```vue
+<template>
+	<uv-subsection :list="list" mode="subsection" :current="current" @change="change"></uv-subsection>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref(['未付款', '待评价', '已付款']);
+const current = ref(1);
+function change(index) {
+  current.value = index;
+}
+
+</script>
+```
+
+### 颜色配置
+
+- 通过`activeColor`配置激活选项的文字颜色
+- 通过`inactiveColor`配置未激活选项的文字颜色
+- 通过`bgColor`配置背景颜色，`mode="button"`时有效（默认`#eeeeef` ）
+
+```vue
+<template>
+	<uv-subsection 
+		:list="list" 
+		mode="button" 
+		:current="current" 
+		activeColor="#f56c6c"
+		inactiveColor="#a9e08f"
+		bgColor="#f56c6c"
+		@change="change">
+	</uv-subsection>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref(['未付款', '待评价', '已付款']);
+const current = ref(1);
+function change(index) {
+  current.value = index;
+}
+
+</script>
+```
+
+### 自定义样式
+
+通过`custom-style`和`custom-item-style`属性可以自定义一些样式，比如设置圆角等，示例如下：
+
+```vue
+<template>
+	<uv-subsection 
+	:list="list" 
+	:current="current"
+	custom-style="height: 60rpx;border-radius: 30rpx;" 
+	custom-item-style="border-radius: 30rpx;" 
+	@change="change"></uv-subsection>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref(['未付款', '待评价', '已付款']);
+const current = ref(1);
+function change(index) {
+  current.value = index;
+}
+
+</script>
+```
+
+### 注意事项
+
+如果想通过一个变量绑定`current`值，需要在`change`事件回调中修改此值，否则可能会由于`props`的限制，前后两次设置`current`为相同的值，
+而导致无法通过修改`current`值触发分段器的变化。
+
+```vue
+<template>
+	<uv-subsection :list="list" :current="current" @change="change"></uv-subsection>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref(['未付款', '待评价', '已付款']);
+const current = ref(0);
+function change(index) {
+  current.value = index;
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Subsection Props
+
+| 参数			| 说明									| 类型					| 默认值		|  可选值	|
+|:-				|:-										|:-						|:-			|:-			|
+| list			| 选项的数组，形式见上方"基本使用"			| Array					| -			| -			|
+| keyName		| 从`list`元素对象中读取的键名				| String	            | name		| -			|
+| current		| 初始化时默认选中的选项索引值				| String &#124; Number	| 0			| -			|
+| activeColor	| 激活时的颜色							| String				| #3c9cff	| -			|
+| inactiveColor| 未激活时的颜色							| String				| #303133	| -			|
+| mode			| 模式选择，见上方"模式选择"说明			| String				| button	| button &#124; subsection|
+| fontSize		| 字体大小，单位`px(rpx)`						| String &#124; Number	| 12		| -			|
+| bold			| 激活选项的字体是否加粗					| Boolean				| true		| true &#124; false		|
+| bgColor		| 组件背景颜色，`mode`为`button`时有效		| String				| #eeeeef	| -			|
+| customStyle		| 自定义外部样式		| String &#124; Object	| -	| -			|
+| customItemStyle		| 自定义bar样式		| String &#124; Object	| -	| -			|
+
+### Popup Methods
+
+| 方法名	| 说明 | 参数 |
+|:-	 |:- |:- |
+| init | 初始化	 | 如果是在弹窗等场景使用，可能造成打开弹窗之前因为计算不准确导致错乱，可以在打开时候通过该方法进行初始化即可正常 |
+
+### Subsection Events
+
+| 事件名| 说明						| 回调参数							|
+| :-	| :-						| :-								|
+| change| 分段器选项发生改变时触发		| index：选项的index索引值，从0开始	|