@gmcb/uv-ui 0.2.26

package/components/uv-swipe-action-item/wxs.js

@@ -0,0 +1,15 @@
+export default {
+    methods: {
+        // 关闭时执行
+        closeHandler() {
+            this.status = 'close'
+        },
+        setState(status) {
+            this.status = status
+        },
+        closeOther() {
+            // 尝试关闭其他打开的单元格
+            this.parent && this.parent.closeOther(this)
+        }
+    }
+}

package/components/uv-swiper/props.js

@@ -0,0 +1,136 @@
+export default {
+	props: {
+		// 列表数组，元素可为字符串，如为对象可通过keyName指定目标属性名
+		list: {
+			type: Array,
+			default: () => []
+		},
+		// 是否显示面板指示器
+		indicator: {
+			type: Boolean,
+			default: false
+		},
+		// 指示器非激活颜色
+		indicatorActiveColor: {
+			type: String,
+			default: '#fff'
+		},
+		// 指示器的激活颜色
+		indicatorInactiveColor: {
+			type: String,
+			default: 'rgba(255, 255, 255, 0.35)'
+		},
+		// 指示器样式，可通过bottom，left，right进行定位
+		indicatorStyle: {
+			type: [String, Object],
+			default: ''
+		},
+		// 指示器模式，line-线型，dot-点型
+		indicatorMode: {
+			type: String,
+			default: 'line'
+		},
+		// 是否自动切换
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 当前所在滑块的 index
+		current: {
+			type: [String, Number],
+			default: 0
+		},
+		// 当前所在滑块的 item-id ，不能与 current 被同时指定
+		currentItemId: {
+			type: String,
+			default: ''
+		},
+		// 滑块自动切换时间间隔
+		interval: {
+			type: [String, Number],
+			default: 3000
+		},
+		// 滑块切换过程所需时间
+		duration: {
+			type: [String, Number],
+			default: 300
+		},
+		// 播放到末尾后是否重新回到开头
+		circular: {
+			type: Boolean,
+			default: false
+		},
+		// 滑动方向是否为纵向
+		vertical: {
+			type: Boolean,
+			default: false
+		},
+		// 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持
+		previousMargin: {
+			type: [String, Number],
+			default: 0
+		},
+		// 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持
+		nextMargin: {
+			type: [String, Number],
+			default: 0
+		},
+		// 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持
+		acceleration: {
+			type: Boolean,
+			default: false
+		},
+		// 同时显示的滑块数量，nvue、支付宝小程序不支持
+		displayMultipleItems: {
+			type: Number,
+			default: 1
+		},
+		// 指定swiper切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic
+		// 只对微信小程序有效
+		easingFunction: {
+			type: String,
+			default: 'default'
+		},
+		// list数组中指定对象的目标属性名
+		keyName: {
+			type: String,
+			default: 'url'
+		},
+		// 图片的裁剪模式
+		imgMode: {
+			type: String,
+			default: 'aspectFill'
+		},
+		// 组件高度
+		height: {
+			type: [String, Number],
+			default: 130
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: '#f3f4f6'
+		},
+		// 组件圆角，数值或带单位的字符串
+		radius: {
+			type: [String, Number],
+			default: 4
+		},
+		// 是否加载中
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示标题，要求数组对象中有title属性
+		showTitle: {
+			type: Boolean,
+			default: false
+		},
+		// 显示的标题样式
+		titleStyle: {
+			type: [Object, String],
+			default: ''
+		},
+		...uni.$uv?.props?.swiper
+	}
+}

package/components/uv-swiper/uv-swiper.vue

@@ -0,0 +1,263 @@
+<template>
+	<view
+		class="uv-swiper"
+		:style="{
+			backgroundColor: bgColor,
+			height: $uv.addUnit(height),
+			borderRadius: $uv.addUnit(radius)
+		}"
+	>
+		<view
+			class="uv-swiper__loading"
+			v-if="loading"
+		>
+			<uv-loading-icon mode="circle"></uv-loading-icon>
+		</view>
+		<swiper
+			v-else
+			class="uv-swiper__wrapper"
+			:style="{
+				height: $uv.addUnit(height),
+				flex: 1
+			}"
+			@change="change"
+			:circular="circular"
+			:vertical="vertical"
+			:interval="interval"
+			:duration="duration"
+			:autoplay="autoplay"
+			:current="current"
+			:currentItemId="currentItemId"
+			:previousMargin="$uv.addUnit(previousMargin)"
+			:nextMargin="$uv.addUnit(nextMargin)"
+			:acceleration="acceleration"
+			:displayMultipleItems="displayMultipleItems"
+			:easingFunction="easingFunction"
+		>
+			<swiper-item
+				class="uv-swiper__wrapper__item"
+				v-for="(item, index) in list"
+				:key="index"
+			>
+				<view
+					class="uv-swiper__wrapper__item__wrapper"
+					:style="[itemStyle(index)]"
+				>
+					<!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
+					<image
+						class="uv-swiper__wrapper__item__wrapper__image"
+						v-if="getItemType(item) === 'image'"
+						:src="getSource(item)"
+						:mode="imgMode"
+						@tap="clickHandler(index)"
+						:style="{
+							height: $uv.addUnit(height),
+							borderRadius: $uv.addUnit(radius)
+						}"
+					></image>
+					<video
+						class="uv-swiper__wrapper__item__wrapper__video"
+						v-if="getItemType(item) === 'video'"
+						:id="`video-${index}`"
+						:enable-progress-gesture="false"
+						:src="getSource(item)"
+						:poster="getPoster(item)"
+						:title="showTitle && $uv.test.object(item) && item.title ? item.title : ''"
+						:style="{
+							height: $uv.addUnit(height)
+						}"
+						controls
+						@tap="clickHandler(index)"
+					></video>
+					<text
+						v-if="showTitle && $uv.test.object(item) && item.title"
+						class="uv-swiper__wrapper__item__wrapper__title uv-line-1"
+						:style="[$uv.addStyle(titleStyle)]"
+					>{{ item.title }}</text>
+				</view>
+			</swiper-item>
+		</swiper>
+		<view class="uv-swiper__indicator" :style="[$uv.addStyle(indicatorStyle)]">
+			<slot name="indicator">
+				<uv-swiper-indicator
+					v-if="!loading && indicator && !showTitle"
+					:indicatorActiveColor="indicatorActiveColor"
+					:indicatorInactiveColor="indicatorInactiveColor"
+					:length="list.length"
+					:current="currentIndex"
+					:indicatorMode="indicatorMode"
+				></uv-swiper-indicator>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * Swiper 轮播图
+	 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
+	 * @tutorial https://www.uvui.cn/components/swiper.html
+	 * @property {Array}			list					轮播图数据
+	 * @property {Boolean}			indicator				是否显示面板指示器（默认 false ）
+	 * @property {String}			indicatorActiveColor	指示器非激活颜色（默认 '#FFFFFF' ）
+	 * @property {String}			indicatorInactiveColor	指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
+	 * @property {String | Object}	indicatorStyle			指示器样式，可通过bottom，left，right进行定位
+	 * @property {String}			indicatorMode			指示器模式（默认 'line' ）
+	 * @property {Boolean}			autoplay				是否自动切换（默认 true ）
+	 * @property {String | Number}	current					当前所在滑块的 index（默认 0 ）
+	 * @property {String}			currentItemId			当前所在滑块的 item-id ，不能与 current 被同时指定
+	 * @property {String | Number}	interval				滑块自动切换时间间隔（ms）（默认 3000 ）
+	 * @property {String | Number}	duration				滑块切换过程所需时间（ms）（默认 300 ）
+	 * @property {Boolean}			circular				播放到末尾后是否重新回到开头（默认 false ）
+	 * @property {String | Number}	previousMargin			前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
+	 * @property {String | Number}	nextMargin				后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
+	 * @property {Boolean}			acceleration			当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
+	 * @property {Number}			displayMultipleItems	同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
+	 * @property {String}			easingFunction			指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
+	 * @property {String}			keyName					list数组中指定对象的目标属性名（默认 'url' ）
+	 * @property {String}			imgMode					图片的裁剪模式（默认 'aspectFill' ）
+	 * @property {String | Number}	height					组件高度（默认 130 ）
+	 * @property {String}			bgColor					背景颜色（默认 	'#f3f4f6' ）
+	 * @property {String | Number}	radius					组件圆角，数值或带单位的字符串（默认 4 ）
+	 * @property {Boolean}			loading					是否加载中（默认 false ）
+	 * @property {Boolean}			showTitle				是否显示标题，要求数组对象中有title属性（默认 false ）
+	 * @event {Function(index)}	click	点击轮播图时触发	index：点击了第几张图片，从0开始
+	 * @event {Function(index)}	change	轮播图切换时触发(自动或者手动切换)	index：切换到了第几张图片，从0开始
+	 * @example	<uv-swiper :list="list4" keyName="url" :autoplay="false"></uv-swiper>
+	 */
+	export default {
+		name: 'uv-swiper',
+		mixins: [mpMixin, mixin, props],
+		emits: ['click','change'],
+		data() {
+			return {
+				currentIndex: 0
+			}
+		},
+		watch: {
+			current(val, preVal) {
+				if(val === preVal) return;
+				this.currentIndex = val; // 和上游数据关联上
+			}
+		},
+		computed: {
+			itemStyle() {
+				return index => {
+					const style = {}
+					// #ifndef APP-NVUE || MP-TOUTIAO
+					// 左右流出空间的写法不支持nvue和头条
+					// 只有配置了此二值，才加上对应的圆角，以及缩放
+					if (this.nextMargin && this.previousMargin) {
+						style.borderRadius = this.$uv.addUnit(this.radius)
+						if (index !== this.currentIndex) style.transform = 'scale(0.92)'
+					}
+					// #endif
+					return style
+				}
+			}
+		},
+		methods: {
+      getItemType(item) {
+        if (typeof item === 'string') return this.$uv.test.video(this.getSource(item)) ? 'video' : 'image'
+        if (typeof item === 'object' && this.keyName) {
+          if (!item.type) return this.$uv.test.video(this.getSource(item)) ? 'video' : 'image'
+          if (item.type === 'image') return 'image'
+          if (item.type === 'video') return 'video'
+          return 'image'
+        }
+      },
+			// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
+			getSource(item) {
+				if (typeof item === 'string') return item
+				if (typeof item === 'object' && this.keyName) return item[this.keyName]
+				else this.$uv.error('请按格式传递列表参数')
+				return ''
+			},
+			// 轮播切换事件
+			change(e) {
+				// 当前的激活索引
+				const {
+					current
+				} = e.detail
+				this.pauseVideo(this.currentIndex)
+				this.currentIndex = current
+				this.$emit('change', e.detail)
+			},
+			// 切换轮播时，暂停视频播放
+			pauseVideo(index) {
+				const lastItem = this.getSource(this.list[index])
+				if (this.$uv.test.video(lastItem)) {
+					// 当视频隐藏时，暂停播放
+					const video = uni.createVideoContext(`video-${index}`, this)
+					video.pause()
+				}
+			},
+			// 当一个轮播item为视频时，获取它的视频海报
+			getPoster(item) {
+				return typeof item === 'object' && item.poster ? item.poster : ''
+			},
+			// 点击某个item
+			clickHandler(index) {
+				this.$emit('click', index)
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	$show-lines: 1;
+	@import '../../libs/css/variable.scss';
+	@import '../../libs/css/components.scss';
+	.uv-swiper {
+		@include flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		overflow: hidden;
+
+		&__wrapper {
+			flex: 1;
+
+			&__item {
+				flex: 1;
+
+				&__wrapper {
+					@include flex;
+					position: relative;
+					overflow: hidden;
+					transition: transform 0.3s;
+					flex: 1;
+
+					&__image {
+						flex: 1;
+					}
+
+					&__video {
+						flex: 1;
+					}
+
+					&__title {
+						position: absolute;
+						background-color: rgba(0, 0, 0, 0.3);
+						bottom: 0;
+						left: 0;
+						right: 0;
+						font-size: 28rpx;
+						height: 60rpx;
+						line-height: 60rpx;
+						color: #FFFFFF;
+						flex: 1;
+					}
+				}
+			}
+		}
+
+		&__indicator {
+			position: absolute;
+			bottom: 10px;
+		}
+	}
+</style>

package/components/uv-swiper-indicator/props.js

@@ -0,0 +1,30 @@
+export default {
+	props: {
+		// 轮播的长度
+		length: {
+			type: [String, Number],
+			default: 0
+		},
+		// 当前处于活动状态的轮播的索引
+		current: {
+			type: [String, Number],
+			default: 0
+		},
+		// 指示器非激活颜色
+		indicatorActiveColor: {
+			type: String,
+			default: ''
+		},
+		// 指示器的激活颜色
+		indicatorInactiveColor: {
+			type: String,
+			default: ''
+		},
+		// 指示器模式，line-线型，dot-点型
+		indicatorMode: {
+			type: String,
+			default: ''
+		},
+		...uni.$uv?.props?.swiperIndicator
+	}
+}

package/components/uv-swiper-indicator/uv-swiper-indicator.vue

@@ -0,0 +1,112 @@
+<template>
+	<view class="uv-swiper-indicator">
+		<view
+			class="uv-swiper-indicator__wrapper"
+			v-if="indicatorMode === 'line'"
+			:class="[`uv-swiper-indicator__wrapper--${indicatorMode}`]"
+			:style="{
+				width: $uv.addUnit(lineWidth * length),
+				backgroundColor: indicatorInactiveColor
+			}"
+		>
+			<view
+				class="uv-swiper-indicator__wrapper--line__bar"
+				:style="[lineStyle]"
+			></view>
+		</view>
+		<view
+			class="uv-swiper-indicator__wrapper"
+			v-if="indicatorMode === 'dot'"
+		>
+			<view
+				class="uv-swiper-indicator__wrapper__dot"
+				v-for="(item, index) in length"
+				:key="index"
+				:class="[index === current && 'uv-swiper-indicator__wrapper__dot--active']"
+				:style="[dotStyle(index)]"
+			>
+
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * SwiperIndicator 轮播图指示器
+	 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
+	 * @tutorial https://www.uvui.cn/components/swiper.html
+	 * @property {String | Number}	length					轮播的长度（默认 0 ）
+	 * @property {String | Number}	current					当前处于活动状态的轮播的索引（默认 0 ）
+	 * @property {String}			indicatorActiveColor	指示器非激活颜色
+	 * @property {String}			indicatorInactiveColor	指示器的激活颜色
+	 * @property {String}			indicatorMode			指示器模式（默认 'line' ）
+	 * @example	<uv-swiper :list="list4" indicator keyName="url" :autoplay="false"></uv-swiper>
+	 */
+	export default {
+		name: 'uv-swiper-indicator',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				lineWidth: 22
+			}
+		},
+		computed: {
+			// 指示器为线型的样式
+			lineStyle() {
+				let style = {}
+				style.width = this.$uv.addUnit(this.lineWidth)
+				style.transform = `translateX(${ this.$uv.addUnit(this.current * this.lineWidth) })`
+				style.backgroundColor = this.indicatorActiveColor
+				return style
+			},
+			// 指示器为点型的样式
+			dotStyle() {
+				return index => {
+					let style = {}
+					style.backgroundColor = index === this.current ? this.indicatorActiveColor : this.indicatorInactiveColor
+					return style
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	.uv-swiper-indicator {
+
+		&__wrapper {
+			@include flex;
+
+			&--line {
+				border-radius: 100px;
+				height: 4px;
+
+				&__bar {
+					width: 22px;
+					height: 4px;
+					border-radius: 100px;
+					background-color: #FFFFFF;
+					transition: transform 0.3s;
+				}
+			}
+
+			&__dot {
+				width: 5px;
+				height: 5px;
+				border-radius: 100px;
+				margin: 0 4px;
+
+				&--active {
+					width: 12px;
+				}
+			}
+
+		}
+	}
+</style>

package/components/uv-switch/props.js

@@ -0,0 +1,58 @@
+export default {
+	props: {
+		value: {
+			type: [Boolean, String, Number],
+			default: false
+		},
+		modelValue: {
+			type: [Boolean, String, Number],
+			default: false
+		},
+		// 是否为加载中状态
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 是否为禁用装填
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 开关尺寸，单位px
+		size: {
+			type: [String, Number],
+			default: 25
+		},
+		// 打开时的背景颜色
+		activeColor: {
+			type: String,
+			default: '#2979ff'
+		},
+		// 关闭时的背景颜色
+		inactiveColor: {
+			type: String,
+			default: '#fff'
+		},
+		// switch打开时的值
+		activeValue: {
+			type: [String, Number, Boolean],
+			default: true
+		},
+		// switch关闭时的值
+		inactiveValue: {
+			type: [String, Number, Boolean],
+			default: false
+		},
+		// 是否开启异步变更，开启后需要手动控制输入值
+		asyncChange: {
+			type: Boolean,
+			default: false
+		},
+		// 圆点与外边框的距离
+		space: {
+			type: [String, Number],
+			default: 0
+		},
+		...uni.$uv?.props?.switch
+	}
+}