esswisdom_app/uni_modules/lime-switch/components/l-switch/l-switch.vue

<template>
	<view class="l-switch">
		<view
			class="l-switch__rail"
			ref="rootRef" 
			:hover-start-time="20" 
			:hover-stay-time="70" 
			:hover-class="rubberBand && !disabled && !loading ? 'l-switch--hover' : ''" 
			:class="{
				'l-switch--checked' : innerValue,
				'l-switch--unchecked' : !innerValue,
				'l-switch--disabled' : disabled,
				'l-switch--round' : round,
				'l-switch--square' : !round,
			}" 
			:style="[styles]" 
			aria-role="switch" 
			@click="handleClick">
			<view class="l-switch__children-placeholder" v-if="placeholder.length > 0">
				<view class="l-switch__rail-placeholder" v-for="item in placeholder" :key="item">
					{{item}}
				</view>
			</view>
			<view class="l-switch__dot" 
				:class="{
					'l-switch__dot--disabled' : disabled,
					'l-switch__dot--round' : round,
					'l-switch__dot--square' : !round,
				}"  
				ref="dotRef">
				<text class="l-switch__placeholder l-switch__placeholder--checked"
					ref="checkedRef"  v-if="placeholder.length > 0">
					{{placeholder[0]}}
				</text>
				<text class="l-switch__placeholder l-switch__placeholder--unchecked" 
					ref="uncheckedRef" v-if="placeholder.length > 1">
					{{placeholder[1]}}
				</text>
				<l-loading v-if="loading && $slots['icon'] == null"></l-loading>
				<slot name="icon" :checked="innerValue"></slot>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import { defineComponent, ref, computed } from '@/uni_modules/lime-shared/vue';
	import switchProps from './props';
	
	
	/**
	 * LimeSwitch 图片
	 * @description 用于控制某个功能的开启和关闭。可嵌套内容、禁用以及颜色配置，兼容uniapp/uniappx
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=155222
	 * @property {Boolean} value 选中时对应的值
	 * @property {Boolean} defaultValue 默认值
	 * @property {Boolean} disabled 是否禁用
	 * @property {Boolean} loading 是否加载
	 * @property {Boolean} round 是否为圆形
	 * @property {Boolean} rubberBand 是否开启橡皮效果
	 * @property {Array} placeholder 占位内容
	 * @property {String} src 图片地址
	 * @property {String} fontSize 字体大小
	 * @property {String} width 最小宽度
	 * @property {String} height 高度
	 * @property {String} dotSize 按钮大小
	 * @property {String} dotPressedSize 按下按钮大小
	 * @property {String} checkedColor 激活背景色
	 * @property {String} disabledColor 禁用背景色
	 * @property {String} checkedDisabledColor 激活禁用背景色
	 * @property {String} uncheckedColor 背景色
	 * @event {Function} change 切换触发
	 */
	export default defineComponent({
		name: 'l-switch',
		props: switchProps,
		emits: ['change', 'update:modelValue', 'input'],
		setup(props, {emit}) {
			// 设置默认值
			const modelValue = ref((props.modelValue ?? false) || (props.defaultValue ?? false))
			const innerValue = computed({
				set(value: boolean){
					if(value == modelValue.value) return
					modelValue.value = value;
					emit('change', value)
					emit('update:modelValue', value)
					// #ifdef VUE2
					emit('input', value)
					// #endif
				},
				get():boolean {
					return (props.value ?? false) || modelValue.value
				},
			} as WritableComputedOptions<boolean>)
			
			const styles = computed(()=>{
				const style: Record<string, any> = {}
				
				if(props.width) {
					style['--l-switch-width'] = props.width!
				}
				if(props.height) {
					style['--l-switch-height'] = props.height!
				}
				if(props.fontSize) {
					style['--l-swtich-font-size'] = props.fontSize!
				}
				if(props.dotSize) {
					style['--l-switch-dot-size'] = props.dotSize!
				}
				if(props.dotPressedSize) {
					style['--l-switch-dot-size-pressed'] = props.dotPressedSize!
				}
				if(props.checkedColor) {
					style['--l-switch-checked-color'] = props.checkedColor!
				}
				if(props.checkedDisabledColor) {
					style['--l-switch-checked-disabled-color'] = props.checkedDisabledColor!
				}
				if(props.disabledColor) {
					style['--l-switch-unchecked-disabled-color'] = props.disabledColor!
				}
				if(props.uncheckedColor) {
					style['--l-switch-unchecked-color'] = props.uncheckedColor!
				}
				return style
			})
			const handleClick = (e: UniPointerEvent) => {
				if(props.disabled || props.loading) return
				innerValue.value = !innerValue.value;
			}
			
			
			return {
				innerValue,
				styles,
				handleClick
			}
		}
	})
	
</script>
<style lang="scss">
	@import './index-u';
</style>