@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/swipeAction.md

@@ -0,0 +1,279 @@
+## SwipeAction 滑动单元格 <to-api/>
+
+<demo-model url="/pages/componentsC/swipeAction/swipeAction"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-swipe-action > uv-swipe-action-item**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-swipe-action)
+
+:::
+
+该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
+
+
+::: warning 注意
+如果把该组件通过v-for用于左滑删除的列表，请保证循环的`:key`是一个唯一值，可以用数据的id或者title替代。
+不能是数组循环的index，否则删除的时候，可能会出现数据错乱
+:::
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√(仅支持微信、QQ小程序)|√|√|
+
+### 基本使用
+
+- 通过`slot`传入内部内容即可，可以将`v-for`的`index`索引值传递给`index`参数，用于点击时，在回调方法中对某一个数据进行操作(点击回调时第一个参数会返回此索引值)  
+- 内部的按钮通过`options`参数配置，此参数为一个数组，元素为对象，可以配置按钮的文字，背景颜色(建议只配置此两个参数即可)，**请勿配置宽高等属性**。
+
+
+```vue
+<template>
+	<view>
+		<uv-swipe-action>
+			<uv-swipe-action-item :options="options">
+				<view class="swipe-action uv-border-top uv-border-bottom">
+					<view class="swipe-action__content">
+						<text class="swipe-action__content__text">基础使用</text>
+					</view>
+				</view>
+			</uv-swipe-action-item>
+		</uv-swipe-action>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const options = ref([{
+  text: '删除',
+  style: {
+    backgroundColor: '#f56c6c'
+  }
+}]);
+
+</script>
+<style lang="scss">
+	.uv-page {
+		padding: 0;
+	}
+	.uv-demo-block__title {
+		padding: 10px 0 2px 15px;
+	}
+	.swipe-action {
+		&__content {
+			padding: 25rpx 0;
+			&__text {
+				font-size: 15px;
+				color: #222;
+				padding-left: 30rpx;
+			}
+		}
+	}
+</style>
+```
+
+### 多个按钮并列
+
+通过`options`属性值，达到多个并列的效果
+
+```vue
+<template>
+	<view>
+		<uv-swipe-action>
+			<uv-swipe-action-item :options="options">
+				<view class="swipe-action uv-border-top uv-border-bottom">
+					<view class="swipe-action__content">
+						<text class="swipe-action__content__text">两个按钮并列</text>
+					</view>
+				</view>
+			</uv-swipe-action-item>
+		</uv-swipe-action>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const options = ref([{
+  text: '收藏',
+  style: {
+    backgroundColor: '#3c9cff'
+  }
+}, {
+  text: '删除',
+  style: {
+    backgroundColor: '#f56c6c'
+  }
+}]);
+
+</script>
+<style lang="scss">
+	.uv-page {
+		padding: 0;
+	}
+	.uv-demo-block__title {
+		padding: 10px 0 2px 15px;
+	}
+	.swipe-action {
+		&__content {
+			padding: 25rpx 0;
+			&__text {
+				font-size: 15px;
+				color: #222;
+				padding-left: 30rpx;
+			}
+		}
+	}
+</style>
+```
+
+### 组合使用
+
+ 通过`options`属性的`options`值达成组合效果
+
+```vue
+<template>
+	<view>
+		<uv-swipe-action>
+			<uv-swipe-action-item 
+				:options="item.options" 
+				v-for="(item, index) in options" 
+				:disabled="item.disabled" 
+				:key="index">
+				<view class="swipe-action uv-border-top" 
+                :class="[index === options.length - 1 && 'uv-border-bottom']">
+					<view class="swipe-action__content">
+						<text class="swipe-action__content__text">{{ item.text }}</text>
+					</view>
+				</view>
+			</uv-swipe-action-item>
+		</uv-swipe-action>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const options = ref([{
+  text: '禁用状态',
+  disabled: true,
+  options: [{
+    text: '置顶',
+    style: {
+      backgroundColor: '#3c9cff'
+    }
+  }, {
+    text: '取消',
+    style: {
+      backgroundColor: '#f9ae3d'
+    }
+  }]
+}, {
+  text: '正常状态',
+  disabled: false,
+  options: [{
+    text: '置顶',
+    style: {
+      backgroundColor: '#3c9cff'
+    }
+  }, {
+    text: '取消',
+    style: {
+      backgroundColor: '#f9ae3d'
+    }
+  }]
+}, {
+  text: '自动关闭',
+  disabled: false,
+  options: [{
+    text: '置顶',
+    style: {
+      backgroundColor: '#3c9cff'
+    }
+  }, {
+    text: '取消',
+    style: {
+      backgroundColor: '#f9ae3d'
+    }
+  }]
+}]);
+
+</script>
+
+<style lang="scss">
+	.uv-page {
+		padding: 0;
+	}
+	.uv-demo-block__title {
+		padding: 10px 0 2px 15px;
+	}
+	.swipe-action {
+		&__content {
+			padding: 25rpx 0;
+			&__text {
+				font-size: 15px;
+				color: #222;
+				padding-left: 30rpx;
+			}
+		}
+	}
+</style>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### SwipeAction Props
+
+| 参数		| 说明							| 类型		| 默认值	|  可选值	|
+|:-			|:-								|:-			|:-		|:-			|
+| autoClose	| 是否自动关闭其他swipe按钮组		| Boolean	| true	| true &#124; false		|
+
+### SwipeAction Events
+
+|事件名	|说明			|回调参数	|
+|:-		|:-				|:-			|
+| @click	| 点击组件时触发	| index	|
+
+### SwipeActionItem Props
+
+| 参数			| 说明											| 类型					| 默认值	|  可选值	|
+|:-				|:-												|:-						|:-		|:-			|
+| show			| 控制打开或者关闭							| Boolean				| false	| true	&#124; false	|
+| index			| 标识符，如果是`v-for`，可用`index`索引				| String &#124; Number	| -		| -			|
+| disabled		| 是否禁用										| Boolean				| false	| true &#124; false		|
+| autoClose		| 是否自动关闭其他swipe按钮组				| Boolean				| true	| true &#124; false		|
+| threshold		| 滑动距离阈值，只有大于此值，才被认为是要打开菜单		| Number				| 20	| - 		|
+| options		| 右侧按钮内容									| Array					| []	| -			|
+| duration		| 动画过渡时间，单位`ms`							    | String &#124; Number	| 300	| -			|
+| name		| 标识符，如果是`v-for`，可用`index`索引值						    | String &#124; Number	| -	| -			|
+
+### SwipeActionItem Events
+
+|事件名	|说明			|回调参数	|
+|:-		|:-				|:-			|
+| @click	| 按钮被点击时触发	| name: props参数`name`的值，index: 第几个按钮被点击	|
+
+<style scoped>
+h3[id=swipeaction-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+h3[id=swipeaction-events] + table thead tr th:nth-child(3){
+	width: 40%;
+}
+h3[id=swipeactionitem-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+h3[id=swipeactionitem-events] + table thead tr th:nth-child(3){
+	width: 40%;
+}
+</style>

package/docs/components/swiper.md

@@ -0,0 +1,352 @@
+## Swiper 轮播图 <to-api/>
+
+<demo-model url="/pages/componentsC/swiper/swiper"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-swiper**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-swiper)
+
+:::
+
+该组件一般用于导航轮播，banner展示等场景，可开箱即用，具有如下特点：
+- 自定义指示器模式，可配置指示器样式
+- 3D轮播图效果，满足不同的开发需求
+- 可配置显示标题，涵盖不同的应用场景
+- 具有设置加载状态和嵌入视频的能力，功能齐全丰富
+
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+:::warning 注意事项
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+1. swiper在App的vue中、百度支付宝头条QQ小程序中，不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。
+2. `uv-swiper` 是在uni提供的swiper基础上进行封装，更多问题可以去[官方swiper查看](https://uniapp.dcloud.net.cn/component/swiper.html)
+:::
+
+### 基本使用
+
+通过`list`参数传入轮播图列表值，该值为一个数组，键值为图片路径，例如：
+
+```vue
+<template>
+	<uv-swiper :list="list"></uv-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref(['https://cdn.uviewui.com/uview/swiper/swiper1.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper3.png']);
+
+</script>
+```
+
+### 带标题
+
+- 通过`showTitle`属性以展示标题，此时`list`的参数应为一个对象，如下示例：
+- 通过`titleStyle`属性设置标题的样式
+
+::: warning 注意
+您期望使用对象作为参数时，需要配置`uv-swiper`组件的`keyName`参数为`您当前对象的图片key`值）如：`keyName="image"`
+:::
+
+```vue
+<template>
+	<uv-swiper 
+	:list="list" 
+	keyName="image" 
+	showTitle 
+	:title-style="{color:'red',textAlign: 'center'}" 
+	:autoplay="false"
+	circular></uv-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+  title: '丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由'
+}, {
+  image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+  title: '明月几时有？把酒问青天'
+}, {
+  image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+  title: '不知天上宫阙，今夕是何年'
+}]);
+
+</script>
+```
+### 带指示器
+
+- 通过`indicator`属性添加指示器
+- 通过`indicatorMode`属性设置指示器的类型：`line` - 线形状 `dot` - 点形状
+
+```vue
+<template>
+	<uv-swiper :list="list" indicator indicatorMode="line" circular></uv-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref(['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png']);
+
+</script>
+```
+### 加载中
+
+通过添加`loading`属性设置加载中的状态
+<br/>
+您也可以动态的来控制加载状态，比如：`:loading='loading'`
+
+```vue
+<template>
+	<uv-swiper :list="[]" loading></uv-swiper>
+</template>
+```
+### 嵌入视频
+
+我们提供了嵌入视频的能力，为避免资源浪费，在您切换轮播的时候视频会停止播放，你可以设置`poster`指定视频封面，案例如下：
+
+:::warning 注意事项
+1. swiper在App的vue中、百度支付宝头条QQ小程序中，不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。
+:::
+
+```vue
+<template>
+	<uv-swiper :list="list" keyName="url" :autoplay="false"></uv-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
+  title: '昨夜星辰昨夜风，画楼西畔桂堂东',
+  poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
+}, {
+  url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+  title: '身无彩凤双飞翼，心有灵犀一点通'
+}, {
+  url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+  title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+}]);
+
+</script>
+```
+
+### 指定类型 
+
+默认会根据链接自动判断`swiper-item`类型，但是在极端情况下可能会不准确，所以我们提供了指定`item`的类型，通过设置`type`为`video`或`image`，如下：
+
+```vue
+<template>
+	<uv-swiper :list="list" keyName="url" :autoplay="false"></uv-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
+  title: '昨夜星辰昨夜风，画楼西畔桂堂东',
+  poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+  type: 'video'
+}, {
+  url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+  title: '身无彩凤双飞翼，心有灵犀一点通',
+  type: 'image'
+}, {
+  url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+  title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+}]);
+
+</script>
+```
+
+### 自定义指示器
+
+如您需要以指示点或数字形式来自定义指示器，请参考如下案例：
+
+```vue
+<template>
+	<view class="uv-demo-block">
+		<text class="uv-demo-block__title">自定义指示器</text>
+		<uv-swiper 
+			:list="list1" 
+			@change="e => current1 = e.current" 
+			:autoplay="false">
+			<template v-slot:indicator>
+				<view class="indicator">
+					<view class="indicator__dot" 
+						v-for="(item, index) in list1" 
+						:key="index" 
+						:class="[index === current1 && 'indicator__dot--active']"
+					></view>
+				</view>
+			</template>
+		</uv-swiper>
+		<view style="height: 15px;"></view>
+		<uv-swiper 
+			:list="list2" 
+			@change="e => current2 = e.current" 
+			:autoplay="false" 
+			indicatorStyle="right: 20px">
+			<template v-slot:indicator>
+				<view class="indicator-num">
+					<text class="indicator-num__text">{{ current2 + 1 }}/{{ list2.length }}</text>
+				</view>
+			</template>
+		</uv-swiper>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const current1 = ref(0);
+const current2 = ref(0);
+const list1 = ref(['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png']);
+const list2 = ref(['https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png']);
+
+</script>
+<style lang="scss">
+	@mixin flex($direction: row) {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: $direction;
+	}
+	.indicator {
+		@include flex(row);
+		justify-content: center;
+		&__dot {
+			height: 6px;
+			width: 6px;
+			border-radius: 100px;
+			background-color: rgba(255, 255, 255, 0.35);
+			margin: 0 5px;
+			transition: background-color 0.3s;
+			&--active {
+				background-color: #ffffff;
+			}
+		}
+	}
+	.indicator-num {
+		padding: 2px 0;
+		background-color: rgba(0, 0, 0, 0.35);
+		border-radius: 100px;
+		width: 35px;
+		@include flex;
+		justify-content: center;
+		&__text {
+			color: #FFFFFF;
+			font-size: 12px;
+		}
+	}
+</style>
+```
+### 卡片式轮播
+
+在实际开发中，普通的轮播或许不能满足您的开发需求，`swiper`组件提供了卡片式轮播的api，您可以参考以下案例实现此功能
+
+```vue
+<template>
+	<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
+	<view class="uv-demo-block">
+		<text class="uv-demo-block__title">卡片式</text>
+		<uv-swiper 
+			:list="list" 
+			previousMargin="30" 
+			nextMargin="30" 
+			circular 
+			:autoplay="false" 
+			radius="5" 
+			bgColor="#ffffff">
+		</uv-swiper>
+	</view>
+	<!-- #endif -->
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref(['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png']);
+
+</script>
+```
+
+### 控制轮播效果
+
+- `autoplay` 是否自动轮播，默认为`true`
+- `interval` 前后两张图自动轮播的时间间隔
+- `duration` 切换一张轮播图所需的时间
+- `circular` 是否衔接滑动，即到最后一张时，是否可以直接转到第一张
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Swiper Props
+
+| 参数					| 说明												| 类型					| 默认值						|  可选值											|
+|:-						|:-													|:-						|:-							|:-													|
+| list					| 轮播图数据，见上方"基本使用"说明						| Array					| -							| -													|
+| indicator				| 是否显示面板指示器									| Boolean				| false						| true	&#124; false											|
+| indicatorActiveColor	| 指示器激活的颜色									| String			    	| #FFFFFF					| -													|
+| indicatorInactiveColor| 指示器非激活颜色									| String			    	| rgba(255, 255, 255, 0.35)	| -													|
+| indicatorStyle		| 指示器样式，可通过bottom，left，right进行定位			| String &#124; Object	| -							| -													|
+| indicatorMode			| 指示器模式											| String				| line						| line &#124; dot 												|
+| autoplay				| 是否自动切换										| Boolean				| true						| true &#124; false												|
+| current				| 当前所在滑块的 index								| Number &#124; String	| 0							| -													|
+| currentItemId			| 当前所在滑块的 item-id ，不能与 current 被同时指定，**支付宝小程序不支持**	| String				| -							| -													|
+| interval				| 滑块自动切换时间间隔（ms）							| String &#124; Number	| 3000						| -													|
+| duration				| 滑块切换过程所需时间（ms），**nvue不支持**					| String &#124; Number	| 300						| -													|
+| circular				| 播放到末尾后是否重新回到开头							| Boolean				| false						| true &#124; false											|
+| vertical<badge text="1.0.4" /> | 滑动方向是否为纵向	| Boolean | false | true &#124; false |
+| previousMargin		| 前边距，可用于露出前一项的一小部分，**app-nvue、抖音小程序、飞书小程序不支持**	| String &#124; Number	| 0							| -													|
+| nextMargin			| 后边距，可用于露出后一项的一小部分，**app-nvue、抖音小程序、飞书小程序不支持**	| String &#124; Number	| 0							| -													|
+| acceleration			| 当开启时，会根据滑动速度，连续滑动多屏，仅支付宝小程序支持	| Boolean				| false						| true	&#124; false											|
+| displayMultipleItems	| 同时显示的滑块数量，**nvue、支付宝小程序不支持**			| Number				| 1							| -													|
+| easingFunction		| 指定swiper切换缓动动画类型， **仅支持微信小程序、快手小程序、京东小程序**		| String				| default					| linear、easeInCubic、easeOutCubic、easeInOutCubic，参考[swiper](https://uniapp.dcloud.net.cn/component/swiper.html)	|
+| keyName				| list数组中指定对象的目标属性名						| String				| url						| -													|
+| imgMode				| 图片的裁剪模式，**不建议设置widthFix，如果图片比例不一样，理论上是会在切换的时候不断变化高度，实际上内部高度定死，所以是矛盾的，在部分平台显示会有异常**  | String				| aspectFill				| 详见图片裁剪										|
+| height				| 组件高度											| String &#124; Number	| 130						| -													|
+| bgColor				| 背景颜色											| String				| #f3f4f6					| -													|
+| radius				| 组件圆角，数值或带单位的字符串						| String &#124; Number	| 4							| -													|
+| loading				| 是否加载中											| Boolean				| false						| true	&#124; false											|
+| showTitle				| 是否显示标题，要求数组对象中有`title`属性				| Boolean				| false						| -													|
+| titleStyle<badge text="1.0.3" />				| 显示的标题样式				| Object				| -						| -													|
+
+### Swiper Events
+
+|事件名	|说明								|回调参数							|
+|:-		|:-									|:-									|
+| @click	| 点击轮播图时触发					| index：点击了第几张图片，从0开始		|
+| @change| 轮播图切换时触发(自动或者手动切换)	| index：切换到了第几张图片，从0开始	|
+
+### SwiperIndicator Props
+
+| 参数					| 说明							| 类型					| 默认值	|  可选值	|
+|:-						|:-								|:-						|:-		|:-			|
+| length				| 轮播的长度						| String &#124; Number	| 0		| -			|
+| current				| 当前处于活动状态的轮播的索引		| String &#124; Number	| 0		| -			|
+| indicatorActiveColor	| 指示器非激活颜色				| String				| -		| -			|
+| indicatorInactiveColor| 指示器的激活颜色				| String				| -		| -			|
+| indicatorStyle		| 指示器的形式					| String				| line	| line &#124; dot		|
+
+<style scoped>
+h3[id=swiper-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+h3[id=swiper-events] + table thead tr th:nth-child(3){
+	width: 40%;
+}
+</style>
+