zx_flk_app/components/toggle-switch/toggle-switch.vue

<template>
	<view class="switch-container" :style="containerStyle" @click="handleClick">
		<!-- 状态文字 -->
		<text class="status-text" :style="[statusTextStyle, leftTextStyle]">{{ activeText }}</text>
		<text class="status-text" :style="[statusTextStyle, rightTextStyle]">{{ inactiveText }}</text>
		<!-- 图片滑块 -->
		<image class="switch-thumb" :src="currentThumb" :style="thumbStyle" @touchstart="onTouchStart"
			@touchmove="onTouchMove" @touchend="onTouchEnd" />
	</view>
</template>

<script>
	export default {
		props: {
			value: Boolean,
			containerWidth: {
				type: Number,
				default: 120
			},
			thumbSize: {
				type: Number,
				default: 32
			},
			// 新增图片相关props
			activeThumb: {
				type: String,
				default: '' // 建议使用绝对路径
			},
			inactiveThumb: {
				type: String,
				default: ''
			},
			// 状态文字配置
			activeText: {
				type: String,
				default: 'ON'
			},
			inactiveText: {
				type: String,
				default: 'OFF'
			},
			activeColor: {
				type: String,
				default: 'ffffff'
			},
			inactiveColor: {
				type: String,
				default: 'ffffff'
			},
			textColor: {
				type: String,
				default: '#000000'
			}
		},
		data() {
			return {
				isDragging: false,
				startX: 0,
				currentX: 0,
				maxOffset: 0
			};
		},
		computed: {
			currentThumb() {
				// return this.value ? this.activeThumb : this.inactiveThumb;
				return 'https://qiniu.bms16.com/Fkovrpq1bexe-Unal_VJREbLUhdu';
			},
			containerStyle() {
				return {
					width: this.containerWidth + 'px',
					backgroundColor: this.value ? this.activeColor : this.inactiveColor,
					height: this.thumbSize + 8 + 'px',
					borderRadius: (this.thumbSize + 8) / 2 + 'px'
				}
			},
			thumbStyle() {
				const baseStyle = {
					width: this.thumbSize + 'px',
					height: this.thumbSize + 'px',
					borderRadius: this.thumbSize / 2 + 'px'
				};

				if (this.isDragging) {
					return {
						...baseStyle,
						transform: `translateX(${this.currentX}px)`,
						transition: 'none'
					};
				}

				return {
					...baseStyle,
					transform: `translateX(${this.value ? this.maxOffset : 0}px)`,
					transition: 'transform 0.3s cubic-bezier(0.3, 1, 0.3, 1)'
				};
			},
			statusTextStyle() {
				return {
					color: this.textColor,
					fontSize: this.thumbSize * 0.5 + 'px',
					opacity: this.isDragging ? 0.6 : 1
				}
			},
			leftTextStyle() {
				return {
					right: (this.thumbSize + 20) + 'px',
					opacity: this.value ? 1 : 0
				}
			},
			rightTextStyle() {
				return {
					left: (this.thumbSize + 20) + 'px',
					opacity: this.value ? 0 : 1
				}
			}
		},
		mounted() {
			//计算滑块（thumb）在滑动轨道（container）上的最大偏移量。
			this.maxOffset = this.containerWidth - this.thumbSize - 4;
		},
		methods: {
			handleClick() {
				//点击立即切换状态
				if (!this.isDragging) {
					this.toggleState();
				}
			},
			onTouchStart(e) {
				this.isDragging = true;
				this.startX = e.touches[0].pageX;
				this.currentX = this.value ? this.maxOffset : 0;
			},
			onTouchMove(e) {
				if (!this.isDragging) return;
				const deltaX = e.touches[0].pageX - this.startX;
				let newX = this.value ? this.maxOffset + deltaX : deltaX;

				// 限制滑动范围
				newX = Math.max(0, Math.min(newX, this.maxOffset));
				this.currentX = newX;
			},
			toggleState() {
				this.$emit('input', !this.value);
				this.$emit('change', !this.value);
			},
			onTouchEnd() {
				this.isDragging = false;
				// 判断滑动是否超过50%
				const threshold = this.containerWidth * 0.5;
				const newState = this.currentX > threshold - this.thumbSize / 2;
				if (newState !== this.value) {
					this.toggleState();
				} else {
					this.currentX = this.value ? this.maxOffset : 0;
				}
			}
		}
	};
</script>

<style scoped>
	.switch-container {
		position: relative;
		display: flex;
		align-items: center;
		transition: background-color 0.3s;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	}

	.switch-thumb {
		position: absolute;
		top: 4px;
		left: 4px;
		z-index: 2;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	}

	.status-text {
		position: absolute;
		z-index: 1;
		font-weight: bold;
		transition: opacity 0.3s;
		pointer-events: none;
	}
</style>