@gmcb/uv-ui 0.2.26 → 0.3.0

package/docs/components/switch.md

@@ -0,0 +1,216 @@
+## Switch 开关选择器 <to-api/>
+
+<demo-model url="/pages/componentsB/switch/switch"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-switch**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-switch)
+
+:::
+
+选择开关用于在打开和关闭状态之间进行切换。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基础使用
+
+通过`v-model`绑定一个`布尔值`变量，这个变量是双向绑定的，当用户开或关选择器的时候，在父组件的该值也会相应的变为`true`或者`false`，也就是说，
+您不用监听`change`事件，也能知道选择器当前处于**开**或者**关**的状态。
+
+我们为其提供了`加载中 禁用 自定义尺寸 自定义颜色 自定义样式 异步控制`等六种能力，并在以下案例中为您展示
+
+```vue
+<template>
+	<uv-switch v-model="value"></uv-switch>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(true);
+
+</script>
+```
+
+### 加载中
+
+设置`loading`属性，默认为`true`，可以让`switch`处于加载中的状态，这时`switch`是不可操作的，您可以通过`:loading='loading'`以动态设置加载状态
+
+```vue
+<template>
+	<view>
+		<uv-switch v-model="value" loading></uv-switch>
+		<uv-switch v-model="value2" loading></uv-switch>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(false);
+const value2 = ref(true);
+
+</script>
+```
+### 禁用switch
+
+设置`disabled`属性,默认为`true`，即可禁用某个组件，让用户无法点击，禁用分为两种状态：
+
+- 一是关闭情况下的禁用，这时只显示一个白色的区域。
+- 二是打开后再禁用，这时会在原有的颜色上加一个`opacity`透明度，但此时依然是不可操作的。
+
+```vue
+<template>
+	<view>
+		<uv-switch v-model="value" disabled></uv-switch>
+		<uv-switch v-model="value2" disabled></uv-switch>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(false);
+const value2 = ref(true);
+
+</script>
+```
+
+
+### 自定义尺寸
+
+设置`size`属性，可以让您自定义`switch`的尺寸，可自定义单位
+
+```vue
+<template>
+	<view>
+		<uv-switch v-model="value" size="28"></uv-switch>
+		<uv-switch v-model="value2" size="20"></uv-switch>
+		<uv-switch v-model="value2" size="30rpx"></uv-switch>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(false);
+const value2 = ref(true);
+
+</script>
+```
+### 自定义颜色
+
+设置`activeColor`属性，可以让您自定义`switch`的颜色，支持多种设置方式，如：`activeColor="#f56c6c" activeColor="red" activeColor="rgb(0,0,0)" `
+
+```vue
+<template>
+	<view>
+		<uv-switch v-model="value" activeColor="#f56c6c"></uv-switch>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(true);
+
+</script>
+```
+### 自定义样式
+
+同时设置`activeColor`和`inactiveColor`属性，可以让您自定义`switch`的样式，同样支持多种设置方式
+
+```vue
+<template>
+	<view>
+		<uv-switch v-model="value" inactive-color="#f3f4f6" active-color="#3c9cff"></uv-switch>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(false);
+
+</script>
+```
+
+### 异步控制
+
+异步控制场景，一般发生在用户打开或者关闭选择器时，需要本地或者向后端请求判断，是否允许用户打开或者关闭的场景。  
+同时您也可以组合使用，例如根据接口结果添加`disabled`，`loading`属性等
+
+:::warning 注意
+请添加`asyncChange`属性来支持异步控制操作，否则您将先操作`v-model`绑定的值，并失去控制效果
+:::
+
+
+```vue
+<template>
+	<uv-switch v-model="value" asyncChange @change="asyncChange"></uv-switch>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(true);
+function asyncChange(e) {
+  uni.showModal({
+    content: e ? '确定要打开吗' : '确定要关闭吗',
+    success: res => {
+      if (res.confirm) {
+        value.value = e;
+      }
+    }
+  });
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Switch Props
+
+- 注意：需要给`switch`组件通过`v-model`绑定一个布尔值，来初始化`switch`的状态，随后该值被双向绑定，
+当用打开选择器时，该值在`switch`组件内部被修改为`true`，并反映到父组件，否则为`false`。换言之，您无需监听`switch`的`change`事件，也能
+知道某一个`switch`是否被选中的状态。
+- `v-model`绑定的值必须为`inactiveValue`、`activeValue`二者之一，且`inactiveValue`和`activeValue`的值不能相等。
+
+| 参数			| 说明									| 类型									| 默认值		|  可选值	|
+|:-				|:-										|:-										|:-			|:-			|
+| v-model		| 双向绑定的值，**注意：这里只能使用v-model，不能使用:value**					| Boolean &#124; String &#124; Number	| false		| -			|
+| loading		| 是否处于加载中							| Boolean								| false		| true &#124;	false	|
+| disabled		| 是否禁用								| Boolean								| false		| true &#124;	false	|
+| size			| 开关尺寸，单位rpx						| String &#124; Number					| 25		| -			|
+| activeColor	| 打开时的背景色							| String								| #2979ff	| -			|
+| inactiveColor	| 关闭时的背景色							| String								| #ffffff	| -			|
+| activeValue	| switch打开时的值						| Boolean &#124; String &#124; Number	| true	| -			|
+| inactiveValue	| switch关闭时的值	    				| Boolean &#124; String &#124; Number	| false		| -			|
+| asyncChange	| 是否开启异步变更，开启后需要手动控制输入值	| Boolean								| false		| true &#124; false		|
+| space			| 圆点与外边框的距离						| String &#124; Number					| 0			| -			|
+
+
+### Switch Events
+
+|事件名	|说明										|回调参数													|
+|:-		|:-											|:-															|
+| @change| 在`switch`打开或关闭时触发					| value：打开时为`activeValue`值，关闭时为`inactiveValue`值	|
+| @input	| 在`switch`打开或关闭时触发（没开启异步）		| value：打开时为`activeValue`值，关闭时为`inactiveValue`值	|
+
+<style scoped>
+h3[id=switch-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+h3[id=switch-events] + table thead tr th:nth-child(3){
+	width: 50%;
+}
+</style>

package/docs/components/tabbar.md

@@ -0,0 +1,263 @@
+## Tabbar 底部导航栏 <to-api/>
+
+<demo-model url="/pages/componentsD/tabbar/tabbar"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-tabbar > uv-tabbar-item**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-tabbar)
+
+:::
+
+#### 优点：
+
+此组件提供了自定义tabbar的能力，具有如下特点：
+- 图标可以使用字体图标(内置图标和扩展图标)或者图片
+- 可以动态切换菜单的数量以及配置
+- 切换菜单之前，可以进行回调鉴权
+- 可以设置角标或数字化提示
+- 有效防止组件区域高度塌陷，无需给父元素额外的内边距或者外边距来避开导航的区域
+
+
+### 平台兼容性
+
+|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))|√|√|
+
+
+### 基本使用
+
+推荐您使用`list`数组遍历循环，案例使用基础方式构建，请根据`click`事件回调进行后续逻辑操作。
+
+``` vue
+<template>
+	<uv-tabbar :value="value" @change="index=>value = index">
+		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
+		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
+		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+	</uv-tabbar>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+</script>
+```
+### 显示徽标
+
+使用`dot`属性添加--小点--类型徽标，使用`badge`属性添加--数字--类型徽标。您也可以使用`:badge='badge'`动态设置徽标数量，
+这在消息盒子的展示中是比较好用的功能，类似于`uniapp`的API `uni.setTabBarBadge`。
+
+``` vue
+<template>
+	<uv-tabbar :value="value" @change="index=>value = index">
+		<uv-tabbar-item text="首页" icon="home" dot></uv-tabbar-item>
+		<uv-tabbar-item text="放映厅" icon="photo" badge="3"></uv-tabbar-item>
+		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+	</uv-tabbar>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+</script>
+```
+
+### 匹配标签的名称
+
+`uv-tabbar-item`标签设置了`name`属性，则`value`值也需要设置对应`name`的值。不设置`name`属性`@change`返回索引，设置返回对应`name`的值。
+
+``` vue
+<template>
+	<uv-tabbar :value="value" @change="name=>value = name">
+		<uv-tabbar-item text="首页" icon="home" name="home"></uv-tabbar-item>
+		<uv-tabbar-item text="放映厅" icon="photo" name="photo"></uv-tabbar-item>
+		<uv-tabbar-item text="直播" icon="play-right" name="play-right"></uv-tabbar-item>
+		<uv-tabbar-item text="我的" icon="account" name="account"></uv-tabbar-item>
+	</uv-tabbar>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('photo');
+</script>
+```
+
+### 自定义图标
+
+如您需要自定义图标，在`uv-tabbar-item`标签中使用插槽`active-icon`和`inactive-icon`来定义图标和颜色
+
+::: warning 注意
+1. 使用图片自定义图标需要自己设置图片的宽高
+2. 一旦自定义图标，`uv-tabbar-item`标签上就不能设置`icon`属性，否则`icon`属性优先级更高
+:::
+
+``` vue
+<template>
+	<uv-tabbar :value="value" @change="index=>value = index">
+		<uv-tabbar-item text="首页">
+			<template v-slot:active-icon>
+				<image class="icon" src="https://cdn.uviewui.com/uview/common/bell-selected.png"></image>
+			</template>
+			<template v-slot:inactive-icon>
+				<image class="icon" src="https://cdn.uviewui.com/uview/common/bell.png"></image>
+			</template>
+		</uv-tabbar-item>
+		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
+		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+	</uv-tabbar>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+</script>
+<style scoped>
+	.icon {
+		width: 36rpx;
+		height: 36rpx;
+	}
+</style>
+```
+
+### 拦截切换事件(点击第二个标签)
+
+在切换事件中，处理拦截事件或者您其他js操作逻辑。
+``` vue
+<template>
+	<uv-tabbar :value="value" @change="change">
+		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
+		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
+		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+	</uv-tabbar>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+
+function change(e) {
+	if (e === 1) {
+		uni.showToast({
+			icon: 'none',
+			title: '请您先登录'
+		});
+		return;
+	}
+
+	value.value = e;
+}
+</script>
+```
+
+### 边框
+
+组件默认带了顶部边框，如果不需要，配置`border`为`false`即可。
+
+```vue
+<template>
+	<uv-tabbar :value="value" :border="false" @change="index=>value = index">
+		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
+		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
+		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+	</uv-tabbar>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+
+</script>
+```
+### 固定在底部(固定在屏幕最下方)
+
+通过设置`fixed`为`true`，该属性默认为`true`，与原生效果无异，但您可以按照api配置您需要的其他配置，如徽标，边框等
+
+```vue
+<template>
+	<uv-tabbar :value="value" :fixed="true" @change="index=>value = index">
+		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
+		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
+		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+	</uv-tabbar>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### TabBar Props
+
+| 参数					| 说明												| 类型					| 默认值		|  可选值	|
+|:-						|:-													|:-						|:-			|:-			|
+| value					| 当前匹配项的index。`TabBarItem`设置了`name`属性则匹配的`name`					| String &#124; Number	| null		| -			|
+| safeAreaInsetBottom	| 是否为iPhoneX留出底部安全距离						| Boolean				| true		| true &#124; false		|
+| border				| 是否显示上方边框									| Boolean				| true		| true &#124; false		|
+| zIndex				| 元素层级`z-index`									| String &#124; Number	| 1			| -			|
+| activeColor			| 选中标签的颜色										| String				| #1989fa	| -			|
+| inactiveColor			| 未选中标签的颜色									| String				| #7d7e80	| -			|
+| fixed					| 是否固定在底部										| Boolean				| true		| true &#124; false		|
+| placeholder			| `fixed`定位固定在底部时，是否生成一个等高元素防止塌陷	| Boolean				| true		| true &#124; false		|
+| iconSize | 图标大小，自定义图片图标设置该属性无效 |  String &#124; Number | 20 | - |
+| customStyle | 自定义样式 | Object | - | - |
+
+
+### TabBarItem Props
+
+| 参数		| 说明													| 类型					| 默认值					|  可选值	|
+|:-			|:-														|:-						|:-						|:-			|
+| name		| `item`标签的名称，作为与`uv-tabbar`的`value`参数匹配的标识符		| String &#124; Number	| null					| -			|
+| icon		| `uv-ui`内置图标或者绝对路径的图片							| String 				| -						| -			|
+| iconSize | 图标大小 |  String &#124; Number | 20 | - |
+| badge		| 右上角的角标提示信息									| String &#124; Number	| null					| -			|
+| dot		| 是否显示圆点，将会覆盖badge参数							| Boolean				| false					| true &#124; false		|
+| text		| 描述文本												| String				| -						| -			|
+| badgeStyle| 控制徽标的位置，对象或者字符串形式，可以设置`top`和`right`属性	| Object &#124; String	| 'top: 6px;right:2px;'	| -			|
+
+### TabBar Events
+
+| 事件名	| 说明			| 回调参数					|
+| :-	| :-			| :-						|
+| @change| 切换选项时触发	| index：当前要切换项的index或name	|
+
+### TabBarItem Events
+
+| 事件名	| 说明			| 回调参数					|
+| :-	| :-			| :-						|
+| @click	| 切换选项时触发	| index：当前要切换项的index或name	|
+
+### TabBarItem Slots
+|名称 | 说明 |
+|:- |:-	|
+| active-icon | 选中项的图标处自定义内容插槽 |
+| inactive-icon | 未选中项的图标处自定义内容插槽 |
+| text | tab项自定义文本插槽 |
+
+<style scoped>
+h3[id=tabbaritem-slots] + table thead tr th:nth-child(2)
+{
+	width: 80%;
+}
+</style>

package/docs/components/table.md

@@ -0,0 +1,5 @@
+## Table 表格 <to-api/>
+
+:::warning 温馨提示
+暂无
+:::