uview-ultra-plus 1.0.0

package/uview-ultra/components/up-slider/slider.uts

@@ -0,0 +1,25 @@
+/*
+ * @Author: jry 
+ * @Date: 2025-12-19 23:00:00 
+ * @Last Modified by: jry
+ * @Last Modified time: 2025-12-19 23:00:00
+ */
+
+export default {
+    slider: {
+        value: 0,
+        blockSize: 18,
+        min: 0,
+        max: 100,
+        step: 1,
+        activeColor: '#2979ff',
+        inactiveColor: '#c0c4cc',
+        blockColor: '#ffffff',
+        showValue: false,
+		disabled:false,
+        blockStyle: {},
+        useNative: false,
+        height: '2px',
+        innerStyle: {} as UTSJSONObject
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-slider/up-slider.uvue

@@ -0,0 +1,547 @@
+<template>
+	<view
+		class="up-slider"
+		:style="[addStyle(customStyle)]"
+	>
+		<template v-if="!useNative || isRange">
+			<view ref="up-slider-inner" class="up-slider-inner" @click="onClick"
+				@onTouchStart="onTouchStart2($event, 1)" @touchmove="onTouchMove2($event, 1)"
+				@touchend="onTouchEnd2($event, 1)" @touchcancel="onTouchEnd2($event, 1)"
+				:class="[disabled ? 'up-slider--disabled' : '']" :style="innerStyleCpu"
+			>
+				<view ref="up-slider__base"
+					class="up-slider__base"
+					:style="[
+						{
+							height: height,
+							backgroundColor: inactiveColor
+						}
+					]"
+				>
+				</view>
+				<view
+					@click="onClick"
+					class="up-slider__gap"
+					:style="[
+						barStyle,
+						{
+							height: height,
+							marginTop: '-' + height,
+							backgroundColor: activeColor
+						}
+					]"
+				>
+				</view>
+				<view v-if="isRange"
+					class="up-slider__gap up-slider__gap-0"
+					:style="[
+						barStyle0,
+						{
+							height: height,
+							marginTop: '-' + height,
+							backgroundColor: inactiveColor
+						}
+					]"
+				>
+				</view>
+				<text v-if="isRange && showValue"
+					class="up-slider__show-range-value"
+					:style="{left: (getPx(barStyle0.width) +  parseFloat(getPx(blockSize))/2) + 'px'}">
+					{{ this.rangeValue[0] ?? '' }}
+				</text>
+				<text v-if="isRange && showValue"
+					class="up-slider__show-range-value"
+					:style="{left: (getPx(barStyle.width) +  parseFloat(getPx(blockSize))/2) + 'px'}">
+					{{ this.rangeValue[1] ?? '' }}
+				</text>
+				<template v-if="isRange">
+					<view class="up-slider__button-wrap up-slider__button-wrap-0" @touchstart="onTouchStart($event, 0)"
+						@touchmove="onTouchMove($event, 0)" @touchend="onTouchEnd($event, 0)"
+						@touchcancel="onTouchEnd($event, 0)" :style="{left: (parseFloat(getPx(barStyle0.width)) + parseFloat(getPx(blockSize))/2).toString() + 'px'}">
+						<slot name="min" v-if="$slots['min'] != null || $slots['$min'] != null"/>
+						<view v-else class="up-slider__button" :style="[blockStyle, {
+							height: getPx(blockSize, true),
+							width: getPx(blockSize, true),
+							backgroundColor: blockColor,
+						}]"></view>
+					</view>
+				</template>
+				<view class="up-slider__button-wrap" @touchstart="onTouchStart($event)"
+					@touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)"
+					@touchcancel="onTouchEnd($event)" :style="{left: (parseFloat(getPx(barStyle.width)) + parseFloat(getPx(blockSize))/2) + 'px'}">
+					<slot name="max" v-if="isRange && ($slots['max'] != null || $slots['$max'] != null)"/>
+					<slot v-else-if="$slots['default'] != null || $slots['$default'] != null"/>
+					<view v-else class="up-slider__button" :style="[blockStyle, {
+						height: getPx(blockSize, true),
+						width: getPx(blockSize, true),
+						backgroundColor: blockColor
+					}]"></view>
+				</view>
+			</view>
+			<view class="up-slider__show-value"
+				v-if="showValue && !isRange">{{ modelValue }}</view>
+		</template>
+		<slider
+			class="up-slider__native"
+			v-else
+			:min="min"
+			:max="max"
+			:step="step"
+			:value="modelValue"
+			:activeColor="activeColor"
+			:backgroundColor="inactiveColor"
+			:blockSize="getPx(blockSize)"
+			:blockColor="blockColor"
+			:showValue="showValue"
+			:disabled="disabled"
+			@changing="changingHandler"
+			@change="changeHandler"
+		></slider>
+	</view>
+</template>
+
+<script>
+	import { propsSlider } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle, getPx, sleep } from '../../libs/function/index'
+	/**
+	 * slider 滑块选择器
+	 * @tutorial https://uview-plus.jiangruyi.com/components/slider.html
+	 * @property {Number | String} value 滑块默认值（默认0）
+	 * @property {Number | String} min 最小值（默认0）
+	 * @property {Number | String} max 最大值（默认100）
+	 * @property {Number | String} step 步长（默认1）
+	 * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
+	 * @property {Number | String} height 滑块条高度，单位rpx（默认6）
+	 * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
+	 * @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
+	 * @property {String} blockColor 滑块颜色（默认#ffffff）
+	 * @property {Object} blockStyle 给滑块自定义样式，对象形式
+	 * @property {Boolean} disabled 是否禁用滑块(默认为false)
+	 * @event {Function} changing 正在滑动中
+	 * @event {Function} change 滑动结束
+	 * @example <up-slider v-model="value" />
+	 */
+	type barStyleType = {
+		width : string,
+		transition ?: string
+	}
+	type sliderRectType = {
+		left: number,
+		width : number
+	}
+	export default {
+		name: 'up-slider',
+		mixins: [mpMixin, mixin, propsSlider],
+		emits: ["start", "changing", "change", "update:modelValue"],
+		data() {
+			return {
+				startX: 0,
+				status: 'end',
+				newValue: 0,
+				distanceX: 0,
+				startValue0: 0,
+				startValue: 0,
+				barStyle0: {
+					width: '0px'
+				} as barStyleType,
+				barStyle: {
+					width: '0px',
+					transition: ''
+				} as barStyleType,
+				sliderRect: {
+					left: 0,
+					width: 0
+				} as sliderRectType
+			};
+		},
+		watch: {
+			// #ifdef VUE3
+			modelValue(n: number) {
+				// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
+				if (this.status == 'end') {
+					const $crtFmtValue = this.updateValue(this.modelValue, false);
+					this.$emit('change', $crtFmtValue);
+				}
+			},
+			// #endif
+			// #ifdef VUE2
+			value(n) {
+				// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
+				if (this.status == 'end') {
+					const $crtFmtValue = this.updateValue(this.value, false);
+					this.$emit('change', $crtFmtValue);
+				}
+			},
+			// #endif
+			rangeValue:{
+            	handler(n: Array<number>){
+					if (this.status == 'end') {
+						this.updateValue(n[0], false, 0);
+						this.updateValue(n[1], false, 1);
+						this.$emit('change', n);
+					}
+            	},
+            	deep:true
+        	}
+		},
+		created() {
+		},
+		computed: {
+			innerStyleCpu() {
+				let style: UTSJSONObject = this.innerStyle;
+				
+				style['height'] = (this.isRange && this.showValue) 
+					? (parseFloat(getPx(this.blockSize)) + 24).toString() + 'px' 
+					: (getPx(this.blockSize)) + 'px';
+				return style;
+			}
+		},
+		mounted() {
+			// 获取滑块条的尺寸信息
+			if (!this.useNative) {
+				// @ts-ignore
+				this.upGetRect('.up-slider__base').then((rect: NodeInfo) => {
+					this.sliderRect.width = rect.width ?? 0;
+					this.sliderRect.left = rect.left ?? 0;
+					// console.log('sliderRect', this.sliderRect)
+					if (this.sliderRect.width == 0) {
+						console.info('如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。')
+					}
+					this.init()
+				});
+			}
+		},
+		methods: {
+			addStyle(e: any) {
+				return addStyle(e)
+			},
+			getPx(e: any, s: boolean = false): string {
+				return getPx(e, s)
+			},
+			init() {
+				if (this.isRange) {
+					// @ts-ignore
+					this.updateValue(parseFloat(this.rangeValue[0].toString()), false, 0);
+					// @ts-ignore
+					this.updateValue(parseFloat(this.rangeValue[1].toString()), false, 1);
+				} else {
+					// #ifdef VUE3
+					this.updateValue(this.modelValue, false);
+					// #endif
+					// #ifdef VUE2
+					this.updateValue(this.value, false);
+					// #endif
+				}
+			},
+			// native拖动过程中触发
+			changingHandler(e: UniSliderChangeEvent) {
+				const {
+					value
+				} = e.detail
+				// 更新v-model的值
+				// #ifdef VUE3
+                this.$emit("update:modelValue", value);
+                // #endif
+                // #ifdef VUE2
+                this.$emit("input", value);
+                // #endif
+				// 触发事件
+				this.$emit('changing', value)
+			},
+			// native滑动结束时触发
+			changeHandler(e: UniSliderChangeEvent) {
+				const {
+					value
+				} = e.detail
+				// 更新v-model的值
+				// #ifdef VUE3
+                this.$emit("update:modelValue", value);
+                // #endif
+                // #ifdef VUE2
+                this.$emit("input", value);
+                // #endif
+				// 触发事件
+				this.$emit('change', value);
+			},
+			onTouchStart(e: any, index = 1) {
+				let event = e as UniTouchEvent
+				if (this.disabled) return;
+				this.startX = 0;
+				// 触摸点集
+				let touches = event.touches[0];
+				// 触摸点到屏幕左边的距离
+				this.startX = touches.clientX;
+				// 此处的this.modelValue虽为props值，但是通过$emit('update:modelValue')进行了修改
+				if (this.isRange) {
+					// @ts-ignore
+					this.startValue0 = this.format(parseFloat(this.rangeValue[0].toString()), 0);
+					// @ts-ignore
+					this.startValue = this.format(parseFloat(this.rangeValue[1].toString()), 1);
+				} else {
+					// #ifdef VUE3
+					this.startValue = this.format(this.modelValue);
+					// #endif
+					// #ifdef VUE2
+					this.startValue = this.format(this.value);
+					// #endif
+				}
+				// 标示当前的状态为开始触摸滑动
+				this.status = 'start';
+
+				let clientX = 0;
+				// #ifndef APP-NVUE
+				clientX = touches.clientX;
+				// #endif
+				// #ifdef APP-NVUE
+				clientX = touches.screenX;
+				// #endif
+				this.distanceX = clientX - this.sliderRect.left;
+				// 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
+				// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+				// @ts-ignore
+				this.newValue = ((this.distanceX / this.sliderRect.width) * (parseFloat(this.max.toString()) - parseFloat(this.min.toString()))) + parseFloat(this.min.toString());
+				this.status = 'moving';
+				// 发出moving事件
+				let $crtFmtValue = this.updateValue(this.newValue, true, index);
+				this.$emit('changing', $crtFmtValue);
+			},
+			onTouchMove(e: any, index = 1) {
+				let event = e as UniTouchEvent
+				if (this.disabled) return;
+				// 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
+				// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
+				if (this.status == 'start') this.$emit('start');
+				let touches = event.touches[0];
+				// console.log('touchs', touches)
+				// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+				let clientX = 0;
+				// #ifndef APP-NVUE
+				clientX = touches.clientX;
+				// #endif
+				// #ifdef APP-NVUE
+				clientX = touches.screenX;
+				// #endif
+				this.distanceX = clientX - this.sliderRect.left;
+				// 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
+				// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+				// @ts-ignore
+				this.newValue = ((this.distanceX / this.sliderRect.width) * (parseFloat(this.max.toString()) - parseFloat(this.min.toString()))) + parseFloat(this.min.toString());
+				this.status = 'moving';
+				// 发出moving事件
+				let crtFmtValue = this.updateValue(this.newValue, true, index);
+				this.$emit('changing', crtFmtValue);
+			},
+			onTouchEnd(e: any, index = 1) {
+				let event = e as UniTouchEvent
+				if (this.disabled) return;
+				if (this.status === 'moving') {
+					let $crtFmtValue = this.updateValue(this.newValue, false, index);
+					this.$emit('change', $crtFmtValue);
+				}
+				this.status = 'end';
+			},
+			onTouchStart2(e: any, index = 1) {
+				let event = e as UniTouchEvent
+				if (!this.isRange) {
+					// this.onChangeStart(event, index);
+				}
+			},
+			onTouchMove2(e: any, index = 1) {
+				let event = e as UniTouchEvent
+				if (!this.isRange) {
+					// this.onTouchMove(event, index);
+				}
+			},
+			onTouchEnd2(e: any, index = 1) {
+				let event = e as UniTouchEvent
+				if (!this.isRange) {
+					// this.onTouchEnd(event, index);
+				}
+			},
+			onClick(event: UniPointerEvent) {
+				// if (this.isRange) return;
+				if (this.disabled) return;
+				// 直接点击滑块的情况，计算方式与onTouchMove方法相同
+				// console.log('click', event)
+				// #ifndef APP-NVUE
+				// nvue下暂时无法获取坐标
+				let clientX = event.x - this.sliderRect.left
+				// @ts-ignore
+				this.newValue = ((clientX / this.sliderRect.width) * (parseFloat(this.max.toString()) - parseFloat(this.min.toString()))) + parseFloat(this.min.toString());
+				this.updateValue(this.newValue, false, 1);
+				// #endif
+			},
+			updateValue(value: number, drag: boolean, index = 1): Array<number> | number {
+				// 去掉小数部分，同时也是对step步进的处理
+				let valueFormat: number = this.format(value, index);
+				// 不允许滑动的值超过max最大值
+				// @ts-ignore
+				if(valueFormat > parseFloat(this.max.toString())) {
+					// @ts-ignore
+					valueFormat = parseFloat(this.max.toString())
+				}
+				// 设置移动的距离，不能用百分比，因为NVUE不支持。
+				// @ts-ignore
+				let width = Math.min((valueFormat - parseFloat(this.min.toString())) / (parseFloat(this.max.toString()) - parseFloat(this.min.toString())) * this.sliderRect.width, this.sliderRect.width)
+				let barStyle = {
+					width: width.toString() + 'px'
+				} as barStyleType;
+				// 移动期间无需过渡动画
+				if (drag == true) {
+					barStyle['transition'] = 'none';
+				} else {
+					// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+					barStyle['transition'] = '';
+				}
+				// 修改value值
+				if (this.isRange) {
+					// @ts-ignore
+					this.rangeValue[index] = valueFormat;
+					this.$emit("update:modelValue", this.rangeValue);
+				} else {
+					// #ifdef VUE3
+					this.$emit("update:modelValue", valueFormat);
+					// #endif
+					// #ifdef VUE2
+					this.$emit("input", valueFormat);
+					// #endif
+				}
+
+				switch (index) {
+					case 0:
+						this.barStyle0.width = barStyle.width;
+						break;
+					case 1:
+						this.barStyle.width = barStyle.width;
+						break;
+					default:
+						break;
+				}
+				if (this.isRange) {
+					return this.rangeValue
+				} else {
+					return valueFormat
+				}
+				return valueFormat
+			},
+			format(value: number, index = 1): number {
+				// 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
+				if (this.isRange) {
+					switch (index) {
+						case 0:
+							return Math.round(
+								// @ts-ignore
+								Math.max(parseFloat(this.min.toString()), Math.min(value, parseFloat(this.rangeValue[1].toString())- parseFloat(this.step.toString()), parseFloat(this.max.toString())))
+								// @ts-ignore
+								/ parseFloat(this.step.toString())
+								// @ts-ignore
+							) * parseInt(this.step.toString());
+							break;
+						case 1:
+							return Math.round(
+								// @ts-ignore
+								Math.max(parseFloat(this.min.toString()), parseFloat(this.rangeValue[0].toString()) + parseFloat(this.step.toString()), Math.min(value, parseFloat(this.max.toString())))
+								// @ts-ignore
+								/ parseFloat(this.step.toString())
+								// @ts-ignore
+							) * parseFloat(this.step.toString());
+							break;
+						default:
+							break;
+					}
+				} else {
+					return Math.round(
+						// @ts-ignore
+						Math.max(parseFloat(this.min.toString()), Math.min(value, parseFloat(this.max.toString())))
+						// @ts-ignore
+						/ parseFloat(this.step.toString())
+					// @ts-ignore
+					) * parseFloat(this.step.toString());
+				}
+				return 0
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.up-slider {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		&__native {
+			flex: 1;
+		}
+
+		&-inner {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			position: relative;
+			border-radius: 999px;
+			padding: 10px 18px;
+			justify-content: center;
+		}
+
+		&__show-value {
+			margin: 10px 18px 10px 0px;
+		}
+
+		&__show-range-value {
+			padding-top: 2px;
+			font-size: 12px;
+			line-height: 12px;
+			position: absolute;
+    		bottom: 0;
+		}
+
+		&__base {
+			background-color: #ebedf0;
+		}
+
+		/* #ifndef APP-NVUE */
+		&-inner:before {
+			position: absolute;
+			right: 0;
+			left: 0;
+			// wait uni-app-x
+			// content: '';
+			top: -8px;
+			bottom: -8px;
+			z-index: -1;
+		}
+		/* #endif */
+
+		&__gap {
+			position: relative;
+			border-radius: 999px;
+			transition: width 0.2s;
+			background-color: #1989fa;
+		}
+
+		&__button {
+			width: 24px;
+			height: 24px;
+			border-radius: 999px;
+			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+			background-color: #fff;
+			transform: scale(0.9);
+			/* #ifdef H5 */
+			cursor: pointer;
+			/* #endif */
+		}
+
+		&__button-wrap {
+			position: absolute;
+			// transform: translate3d(50%, -50%, 0);
+		}
+
+		&--disabled {
+			opacity: 0.5;
+		}
+	}
+</style>