chongqing-app/src/components/text-switch/text-switch.vue

<!-- import textSwitch from "@/components/text-li-switch/text-li-switch.vue" -->
<!-- <textSwitch v-model="prop.must" uncheck_text="非必选" checked_text="必选" @change="switchChange"></textSwitch> -->
<!-- @change可以不写 -->


<template>
	<view>
		<view class="switch_box row-b-c" :class="{ 'disabled-switch': disabled }"
			:style="{ backgroundColor: checked ? checkedbg : uncheckedbg, width: width + 'rpx', height: height + 'rpx', borderRadius: '100px' }"
			@click="changeSwitch">
			<view class="switch_text c-white" :class="checked ? ['to_left'] : ['_right', 'c-black']"
				:style="{ fontSize: size + 'rpx', 'padding-right': padding_right }">{{ checked ? checked_text :
					uncheck_text }}
			</view>
			<view class="round" :style="{
				left: checked ? '100%' : '2rpx',
				marginLeft: checked ? '-' + (Number(height) - 6) + 'rpx' : '', width: + height + 'rpx',
				height: + height - 10 + 'rpx',
				width: + height - 10 + 'rpx',
				borderRadius: height / 2 + 'rpx'
			}">
			</view>
			<!-- 禁用遮罩层 -->
			<view v-if="disabled" class="disabled-overlay"></view>
		</view>
	</view>
</template>

<script>
export default {
	emits: ['click', 'change', 'update:modelValue', 'input'],
	model: {
		prop: 'modelValue',
		event: 'update:modelValue'
	},

	props: {
		modelValue: [String], // 修改为接收字符串值
		checkedbg: {
			type: String,
			default: '#626FF0'
		},
		uncheckedbg: {
			type: String,
			default: '#F67072'
		},
		width: {
			type: String,
			default: '130'
		},
		height: {
			type: String,
			default: '50'
		},
		uncheck_text: {
			type: String,
			default: ''
		},
		checked_text: {
			type: String,
			default: ''
		},
		size: {
			type: String,
			default: '24'
		},
		checked_value: {
			type: String,
			default: 'QUALIFIED'
		},
		uncheck_value: {
			type: String,
			default: 'UNQUALIFIED'
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			checked: false, // 修改为布尔值
			padding_right: '20rpx'
		}
	},
	created() {
		if (this.uncheck_text.length > this.checked_text.length) {
			this.padding_right = '10rpx'
		}
		// 根据传入的值初始化选中状态
		this.updateCheckedState();
	},
	watch: {
		modelValue: {
			handler(newVal) {
				this.updateCheckedState();
			},
			deep: true,
			immediate: true
		},
		checked_value: {
			handler() {
				this.updateCheckedState();
			},
			deep: true
		},
		uncheck_value: {
			handler() {
				this.updateCheckedState();
			},
			deep: true
		}
	},
	methods: {
		// 根据传入的值更新选中状态
		updateCheckedState() {
			if (this.modelValue === this.checked_value) {
				this.checked = true;
			} else if (this.modelValue === this.uncheck_value) {
				this.checked = false;
			}
			// 如果传入的值既不等于checked_value也不等于uncheck_value，保持当前状态
		},
		
		changeSwitch: function (e) {
			// 如果禁用状态，阻止切换
			if (this.disabled) {
				return;
			}
			
			this.checked = !this.checked;
			
			// 根据开关状态确定要传递的值
			const current_value = this.checked ? this.checked_value : this.uncheck_value;
			
			// TODO 兼容 vue2
			this.$emit('input', current_value);
			// TODO　兼容　vue3
			this.$emit('update:modelValue', current_value);

			this.$emit('change', current_value)
		}
	}
}
</script>

<style>
.row-c-c {
	display: flex;
	justify-content: center;
	align-items: center;
}

.c-white {
	color: #FFFFFF;
}

.c-black {
	color: #FFFFFF;
}


/* ---------- */
.switch_box {
	position: relative;
	border: 1rpx solid #EEEEEE;
	background-color: #F6F6F6;
	transition: all 0.4s;
	display: flex;
	align-items: center;
}

.round {
	position: absolute;
	background-color: #FFFFFF;
	transition: all 0.4s;
}

.to_left {
	left: 0;
	margin-left: 0;
}

.to_right {
	left: 100%;
	margin-left: -50rpx;
}

.switch_text {
	position: absolute;
	padding: 0 20rpx;
}

._right {
	right: 0;
	border-right: none !important;
}

/* 禁用状态样式 */
.disabled-switch {
	pointer-events: none;
	user-select: none;
	opacity: 0.6;
	position: relative;
}

.disabled-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(128, 128, 128, 0.3);
	border-radius: 100px;
	z-index: 10;
	pointer-events: none;
}
</style>