uview-ultra 4.5.46

package/components/up-rate/up-rate.uvue

@@ -0,0 +1,484 @@
+<template>
+    <view
+        class="up-rate"
+        :id="elId"
+        ref="up-rate"
+        :style="rootStyle"
+    >
+        <view
+            class="up-rate__content"
+            @touchmove.stop="touchMove"
+            @touchend.stop="touchEnd"
+        >
+            <view
+                class="up-rate__content__item cursor-pointer"
+                v-for="(item, index) in rateCount"
+                :key="index"
+                :class="[elClass]"
+            >
+                <view
+                    class="up-rate__content__item__icon-wrap"
+                    ref="up-rate__content__item__icon-wrap"
+                    @click.stop="clickHandler($event, index + 1)"
+                >
+                    <up-icon
+                        :name="
+                            activeIndexFloor > index
+                                ? activeIcon
+                                : inactiveIcon
+                        "
+                        :color="
+                            disabled
+                                ? '#c8c9cc'
+                                : activeIndexFloor > index
+                                ? activeColor
+                                : inactiveColor
+                        "
+                        :custom-style="iconStyle"
+                        :size="size"
+                    ></up-icon>
+                </view>
+                <view
+                    v-if="allowHalf"
+                    @click.stop="clickHandler($event, index + 1)"
+                    class="up-rate__content__item__icon-wrap up-rate__content__item__icon-wrap--half"
+                    :style="halfIconWrapStyle"
+                    ref="up-rate__content__item__icon-wrap"
+                >
+                    <up-icon
+                        :name="
+							activeIndexFloor > index
+                                ? activeIcon
+                                : inactiveIcon
+                        "
+                        :color="
+                            disabled
+                                ? '#c8c9cc'
+                                : activeIndexCeil > index
+                                ? activeColor
+                                : inactiveColor
+                        "
+                        :custom-style="iconStyle"
+                        :size="size"
+                    ></up-icon>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="uts">
+	import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+	import defProps from './rate.uts'
+	import { addUnit, addStyle, guid, sleep, range, os, upGetRect } from '../../libs/function/index.uts';
+	/**
+	 * rate 评分
+	 * @description 该组件一般用于满意度调查，星型评分的场景
+	 * @tutorial https://uview-plus.jiangruyi.com/components/rate.html
+	 * @property {String | Number}	value			用于v-model双向绑定选中的星星数量 (默认 1 )
+	 * @property {String | Number}	count			最多可选的星星数量 （默认 5 ）
+	 * @property {Boolean}			disabled		是否禁止用户操作 （默认 false ）
+	 * @property {Boolean}			readonly		是否只读 （默认 false ）
+	 * @property {String | Number}	size			星星的大小，单位px （默认 18 ）
+	 * @property {String}			inactiveColor	未选中星星的颜色 （默认 '#b2b2b2' ）
+	 * @property {String}			activeColor		选中的星星颜色 （默认 '#FA3534' ）
+	 * @property {String | Number}	gutter			星星之间的距离 （默认 4 ）
+	 * @property {String | Number}	minCount		最少选中星星的个数 （默认 1 ）
+	 * @property {Boolean}			allowHalf		是否允许半星选择 （默认 false ）
+	 * @property {String}			activeIcon		选中时的图标名，只能为uView的内置图标 （默认 'star-fill' ）
+	 * @property {String}			inactiveIcon	未选中时的图标名，只能为uView的内置图标 （默认 'star' ）
+	 * @property {Boolean}			touchable		是否可以通过滑动手势选择评分 （默认 'true' ）
+	 * @property {Object}			customStyle		组件的样式，对象形式
+	 * @event {Function} change 选中的星星发生变化时触发
+	 * @example <up-rate :count="count" :value="2"></up-rate>
+	 */
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-rate'
+	})
+
+	const props = defineProps({
+		// #ifdef VUE3
+		// 用于v-model双向绑定选中的星星数量
+		modelValue: {
+			type: [String, Number],
+			default: defProps.getAny('rate.value')
+		},
+		// #endif
+		// #ifdef VUE2
+		// 用于v-model双向绑定选中的星星数量
+		value: {
+			type: [String, Number],
+			default: defProps.getAny('rate.value')
+		},
+		// #endif
+		// 要显示的星星数量
+		count: {
+			type: [String, Number],
+			default: defProps.getAny('rate.count')
+		},
+		// 是否不可选中
+		disabled: {
+			type: Boolean,
+			default: defProps.getBoolean('rate.disabled')
+		},
+		// 是否只读
+		readonly: {
+			type: Boolean,
+			default: defProps.getBoolean('rate.readonly')
+		},
+		// 星星的大小，单位px
+		size: {
+			type: [String, Number],
+			default: defProps.getAny('rate.size')
+		},
+		// 未选中时的颜色
+		inactiveColor: {
+			type: String,
+			default: defProps.getString('rate.inactiveColor')
+		},
+		// 选中的颜色
+		activeColor: {
+			type: String,
+			default: defProps.getString('rate.activeColor')
+		},
+		// 星星之间的间距，单位px
+		gutter: {
+			type: [String, Number],
+			default: defProps.getAny('rate.gutter')
+		},
+		// 最少能选择的星星个数
+		minCount: {
+			type: [String, Number],
+			default: defProps.getAny('rate.minCount')
+		},
+		// 是否允许半星
+		allowHalf: {
+			type: Boolean,
+			default: defProps.getBoolean('rate.allowHalf')
+		},
+		// 选中时的图标(星星)
+		activeIcon: {
+			type: String,
+			default: defProps.getString('rate.activeIcon')
+		},
+		// 未选中时的图标(星星)
+		inactiveIcon: {
+			type: String,
+			default: defProps.getString('rate.inactiveIcon')
+		},
+		// 是否可以通过滑动手势选择评分
+		touchable: {
+			type: Boolean,
+			default: defProps.getBoolean('rate.touchable')
+		},
+		customStyle: {
+			type: [Object, String],
+			default: () => ({})
+		}
+	})
+
+	const emit = defineEmits(['update:modelValue', 'change', 'input'])
+	const instance = getCurrentInstance()!.proxy!
+	// 生成一个唯一id，否则一个页面多个评分组件，会造成冲突
+	const elId = guid()
+	const elClass = guid()
+	const rateBoxLeft = ref(0) // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
+	const activeIndex = ref(0 as number)
+	const rateWidth = ref(0) // 每个星星的宽度
+	// 标识是否正在滑动，由于iOS事件上touch比click先触发，导致快速滑动结束后，接着触发click，导致事件混乱而出错
+	const moving = ref(false)
+
+	const rootStyle = computed((): UTSJSONObject => {
+		return addStyle(props.customStyle) as UTSJSONObject
+	})
+
+	const rateCount = computed((): number => {
+		const value = props.count != null ? parseInt(props.count.toString()) : 5
+		return isNaN(value) ? 5 : value
+	})
+
+	const activeIndexNumber = computed((): number => {
+		return parseFloat(activeIndex.value.toString())
+	})
+
+	const activeIndexFloor = computed((): number => {
+		return Math.floor(activeIndexNumber.value)
+	})
+
+	const activeIndexCeil = computed((): number => {
+		return Math.ceil(activeIndexNumber.value)
+	})
+
+	const iconStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		const gutter = props.gutter != null ? parseInt(props.gutter.toString()) : 4
+		style['padding'] = '0 ' + addUnit((isNaN(gutter) ? 4 : gutter) / 2)
+		return style
+	})
+
+	const halfIconWrapStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['width'] = addUnit(rateWidth.value / 2)
+		return style
+	})
+
+	const preventEvent = (e: UniEvent): void => {
+		e.stopPropagation()
+	}
+
+	function toNumber(value: any, fallback: number = 0): number {
+		if (value == null) return fallback
+		const num = parseFloat(value.toString())
+		return isNaN(num) ? fallback : num
+	}
+
+	const getMinCountValue = (): number => {
+		return toNumber(props.minCount, 0)
+	}
+
+	const getCountValue = (): number => {
+		return toNumber(props.count, 0)
+	}
+
+	const normalizeActiveIndex = (value: any): number => {
+		let normalized = toNumber(value, getMinCountValue())
+		const minCount = getMinCountValue()
+		const count = getCountValue()
+		if (normalized < minCount) normalized = minCount
+		if (count > 0 && normalized > count) normalized = count
+		return normalized
+	}
+
+	const getFallbackRateWidth = (): number => {
+		const size = toNumber(props.size, 18)
+		const gutter = toNumber(props.gutter, 0)
+		const width = size + gutter
+		return width > 0 ? width : 18
+	}
+
+	const getRateIconWrapRect = (): void => {
+		upGetRect('.' + elClass, false, instance).then((res: NodeInfo) => {
+			const width = res.width ?? NaN;
+			if (!isNaN(width) && width > 0) {
+				rateWidth.value = width;
+			}
+		});
+	}
+
+	const ensureRateMetrics = (): boolean => {
+		if (isNaN(rateBoxLeft.value)) {
+			rateBoxLeft.value = 0
+		}
+		if (isNaN(rateWidth.value) || rateWidth.value <= 0) {
+			rateWidth.value = getFallbackRateWidth()
+			getRateIconWrapRect()
+		}
+		return !isNaN(rateWidth.value) && rateWidth.value > 0
+	}
+
+	const getRateItemRect = async (): Promise<void> => {
+		await sleep();
+		upGetRect('#' + elId, false, instance).then((res: NodeInfo) => {
+			const left = res.left ?? NaN;
+			if (!isNaN(left)) {
+				rateBoxLeft.value = left;
+			}
+		});
+	}
+
+	const init = (): void => {
+		activeIndex.value = normalizeActiveIndex(props.modelValue)
+		sleep().then(() => {
+			getRateItemRect();
+			getRateIconWrapRect();
+		})
+	}
+
+	// 获取当前激活的评分图标
+	function getActiveIndex(x: number, isClick: boolean = false): void {
+		if (props.disabled || props.readonly) {
+			return;
+		}
+		if (!ensureRateMetrics()) {
+			return;
+		}
+		const count = getCountValue()
+		if (count <= 0 || isNaN(x)) {
+			return;
+		}
+		// 判断当前操作的点的x坐标值，是否在允许的边界范围内
+		const allRateWidth = rateWidth.value * count + rateBoxLeft.value;
+		// 如果小于第一个图标的左边界，设置为最小值，如果大于所有图标的宽度，则设置为最大值
+		x = range(rateBoxLeft.value, allRateWidth, x) - rateBoxLeft.value
+		// 滑动点相对于评分盒子左边的距离
+		const distance = x;
+		// 滑动的距离，相当于多少颗星星
+		let index = 0;
+		// 判断是否允许半星
+		if (props.allowHalf) {
+			index = Math.floor(distance / rateWidth.value);
+			// 取余，判断小数的区间范围
+			const decimal = distance % rateWidth.value;
+			if (decimal <= rateWidth.value / 2 && decimal > 0) {
+				index += 0.5;
+			} else if (decimal > rateWidth.value / 2) {
+				index++;
+			}
+		} else {
+			index = Math.floor(distance / rateWidth.value);
+			// 取余，判断小数的区间范围
+			const decimal = distance % rateWidth.value;
+			// 非半星时，只有超过了图标的一半距离，才认为是选择了这颗星
+			if (isClick){
+				if (decimal > 0) index++;
+			} else {
+				if (decimal > rateWidth.value / 2) index++;
+			}
+		}
+		activeIndex.value = normalizeActiveIndex(Math.min(index, count));
+		// 对最少颗星星的限制
+		if (activeIndex.value < getMinCountValue()) {
+			activeIndex.value = getMinCountValue();
+		}
+
+		// 设置延时为了让click事件在touchmove之前触发
+		setTimeout(() => {
+			moving.value = true;
+		}, 10);
+		// 一定时间后，取消标识为移动中状态，是为了让click事件无效
+		setTimeout(() => {
+			moving.value = false;
+		}, 10);
+	}
+
+	// 手指滑动
+	const touchMove = (e: UniTouchEvent): void => {
+		// 如果禁止通过手动滑动选择，返回
+		if (!props.touchable) {
+			return;
+		}
+		preventEvent(e);
+		ensureRateMetrics();
+		const x = e.changedTouches[0].pageX;
+		getActiveIndex(x);
+	}
+
+	// 停止滑动
+	const touchEnd = (e: UniTouchEvent): void => {
+		// 如果禁止通过手动滑动选择，返回
+		if (!props.touchable) {
+			return;
+		}
+		preventEvent(e);
+		ensureRateMetrics();
+		const x = e.changedTouches[0].pageX;
+		getActiveIndex(x);
+	}
+
+	// 通过点击，直接选中
+	const clickHandler = (e: any, _index: number): void => {
+		let ee = e as UniPointerEvent
+		// ios上，moving状态取消事件触发
+		if (os() === 'ios' && moving.value) {
+			return;
+		}
+		preventEvent(ee);
+		ensureRateMetrics();
+		let x = 0;
+		// x = e.changedTouches[0].pageX;
+		x = ee.pageX;
+		getActiveIndex(x, true);
+	}
+
+	// 发出事件
+	const emitEvent = (): void => {
+		const normalizedValue = normalizeActiveIndex(activeIndex.value != null ? activeIndex.value : 0);
+		if (activeIndex.value == null || normalizedValue != activeIndex.value) {
+			activeIndex.value = normalizedValue;
+			return;
+		}
+		// 发出change事件
+		emit('change', normalizedValue);
+		// 同时修改双向绑定的值
+		// #ifdef VUE3
+		emit('update:modelValue', normalizedValue);
+		// #endif
+		// #ifdef VUE2
+		emit('input', normalizedValue);
+		// #endif
+	}
+
+	watch((): any => props.modelValue, (val: any) => {
+		activeIndex.value = normalizeActiveIndex(val);
+	})
+	// activeIndex: 'emitEvent'
+
+	onMounted(() => {
+		init();
+	})
+
+	defineExpose({
+		rootStyle,
+		rateCount,
+		activeIndexNumber,
+		activeIndexFloor,
+		activeIndexCeil,
+		iconStyle,
+		halfIconWrapStyle,
+		toNumber,
+		getMinCountValue,
+		getCountValue,
+		normalizeActiveIndex,
+		getFallbackRateWidth,
+		ensureRateMetrics,
+		init,
+		getRateItemRect,
+		getRateIconWrapRect,
+		touchMove,
+		touchEnd,
+		clickHandler,
+		emitEvent,
+		getActiveIndex
+	})
+</script>
+
+<style lang="scss" scoped>
+$up-rate-margin: 0 !default;
+$up-rate-padding: 0 !default;
+$up-rate-item-icon-wrap-half-top: 0 !default;
+$up-rate-item-icon-wrap-half-left: 0 !default;
+
+.up-rate {
+    @include flex;
+    align-items: center;
+    margin: $up-rate-margin;
+    padding: $up-rate-padding;
+    /* #ifndef APP-NVUE */
+    // touch-action: none;
+    /* #endif */
+
+    &__content {
+        @include flex;
+
+		&__item {
+		    position: relative;
+
+		    &__icon-wrap {
+		        &--half {
+		            position: absolute;
+		            overflow: hidden;
+		            top: $up-rate-item-icon-wrap-half-top;
+		            left: $up-rate-item-icon-wrap-half-left;
+		        }
+		    }
+		}
+    }
+}
+
+.up-icon {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+}
+</style>