mechanicStore-app/components/u-switch/u-switch.vue

<template>
	<view class="container" @click="toggleSwitch">
		<view :class="['switch', isOn ? 'switch-checked' : 'switch-nochecked']">
			<!-- background handled by switch itself -->
			<view class="switch-handle" :style="isOn ? 'left: 0;' : 'right: 0;'"></view>
			<text class="iconText" v-if="isOn">{{ activeText }}</text>
			<text class="iconText" v-else>{{ inactiveText }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
	} from 'vue';

	const props = defineProps({
		value: {
			type: Boolean,
			default: false
		},
		activeText: {
			type: String,
			default: '已上线'
		},
		inactiveText: {
			type: String,
			default: '已下线'
		},
		activeValue: {
			type: [Number,
				String,
				Boolean
			],
			default: true
		},
		inactiveValue: {
			type: [Number,
				String,
				Boolean
			],
			default: false
		},
	});

	const emit = defineEmits(['update:value', 'change']);

	const isOn = ref(props.value);

	// keep `isOn` in sync when prop changes using watchEffect to avoid
	// generics/return-type confusion in UTS.
	watchEffect(() => {
		const v = props.value;
		if (v != null) {
			isOn.value = v as boolean;
		}
	});

	const toggleSwitch = () => {
		isOn.value = !isOn.value;
		emit('update:value', isOn.value ? props.activeValue : props.inactiveValue);
		emit('change', isOn.value ? props.activeValue : props.inactiveValue);
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 156rpx;
	}

	.switch {
		position: relative;
		width: 156rpx;
		/* match container */
		height: 50rpx;
		border-radius: 40rpx;
		background-color: #d5d5d5;
		transition: background-color 0.3s ease;
		text-align: center;
		align-items: center;
		justify-content: center;
	}

	.switch-handle {
		position: absolute;
		top: 3rpx;
		//   left: 3rpx;
		width: 44rpx;
		height: 44rpx;
		border-radius: 22rpx;
		/* half of 44rpx handle to make it circular */
		background: #fff;
		border: 2rpx solid #e0e0e0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.switch-checked {
		background-color: #ffda59;
	}

	.switch-nochecked {
		background-color: #d5d5d5;
	}

	.switch-checked .switch-handle {
		left: 109rpx;
		/* moved to other side */
	}

	.iconText {
		font-size: 28rpx
	}
</style>