uview-ultra-plus 1.0.0

package/uview-ultra/components/up-checkbox/up-checkbox.uvue

@@ -0,0 +1,523 @@
+<template>
+	<view
+	    class="up-checkbox cursor-pointer"
+	    :style="[checkboxStyle]"
+	    @tap.stop="wrapperClickHandler"
+	    :class="[`up-checkbox-label--` + (parentData['iconPlacement'] != null ? parentData['iconPlacement'].toString() : ''),
+			(parentData['borderBottom'] != false && parentData['placement'] != null
+				&& parentData['placement'].toString() == 'column')
+				? 'up-border-bottom' : '']"
+	>
+		<view
+		    class="up-checkbox__icon-wrap cursor-pointer"
+		    @tap.stop="iconClickHandler"
+		    :class="iconClasses"
+		    :style="[iconWrapStyle]"
+		>
+			<slot name="icon">
+				<up-icon
+				    class="up-checkbox__icon-wrap__icon"
+				    name="checkbox-mark"
+				    :size="elIconSize"
+				    :color="elIconColor"
+				/>
+			</slot>
+		</view>
+		<slot name="label" :label="label" :elDisabled="elDisabled">
+			<text
+				@tap.stop="labelClickHandler"
+				:style="{
+					color: elDisabled ? elInactiveColor : elLabelColor,
+					fontSize: elLabelSize,
+					lineHeight: elLabelSize
+				}"
+			>{{label}}</text>
+		</slot>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { computed, ref, watch, onMounted } from 'vue'
+	import { array as testArray } from '../../libs/function/test'
+	import { addStyle, addUnit, deepMerge, formValidate, error } from '../../libs/function/index'
+	import defProps from './checkbox.uts'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI'
+	const { parent, parentData, getParentData } = useUltraUI()
+	const instance = getCurrentInstance()!.proxy!
+	
+	defineOptions({
+		name: 'up-checkbox'
+	})
+	
+	// 定义 props
+	const props = defineProps({
+		// checkbox组件的标示符
+		name: {
+			type: [String, Number, Boolean],
+			default: defProps.getAny('checkbox.name')
+		},
+		// 形状，square为方形，circle为圆型
+		shape: {
+			type: String,
+			default: defProps.getString('checkbox.shape')
+		},
+		// 整体的大小
+		size: {
+			type: [String, Number],
+			default: defProps.getAny('checkbox.size')
+		},
+		// 是否默认选中
+		checked: {
+			type: Boolean,
+			default: defProps.getBoolean('checkbox.checked')
+		},
+		// 是否禁用
+		disabled: {
+			type: [String, Boolean],
+			default: defProps.getAny('checkbox.disabled')
+		},
+		// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
+		activeColor: {
+			type: String,
+			default: defProps.getString('checkbox.activeColor')
+		},
+		// 未选中的颜色
+		inactiveColor: {
+			type: String,
+			default: defProps.getString('checkbox.inactiveColor')
+		},
+		// 图标的大小，单位px
+		iconSize: {
+			type: [String, Number],
+			default: defProps.getAny('checkbox.iconSize')
+		},
+		// 图标颜色
+		iconColor: {
+			type: String,
+			default: defProps.getString('checkbox.iconColor')
+		},
+		// label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+		label: {
+			type: [String, Number],
+			default: defProps.getAny('checkbox.label')
+		},
+		// label的颜色
+		labelColor: {
+			type: String,
+			default: defProps.getString('checkbox.labelColor')
+		},
+		// label的字体大小，px单位
+		labelSize: {
+			type: [String, Number],
+			default: defProps.getAny('checkbox.labelSize')
+		},
+		// 是否禁止点击提示语选中复选框
+		labelDisabled: {
+			type: [String, Boolean],
+			default: defProps.getAny('checkbox.labelDisabled')
+		},
+		// 定义需要用到的外部样式
+		customStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		// 是否独立使用
+		usedAlone: {
+			type: Boolean,
+			default: false
+		}
+	})
+	
+	// 定义 emit
+	const emit = defineEmits(['change', 'update:checked'])
+	
+	// 定义响应式数据
+	const isChecked = ref(false)
+	
+	// 是否禁用，如果父组件up-checkbox-group禁用的话，将会忽略子组件的配置
+	const elDisabled = computed((): boolean => {
+		let disabledStr = props.disabled
+		if (disabledStr != '') {
+			if (disabledStr == 'true') {
+				return true;
+			} else {
+				return false;
+			}
+		} else {
+			return parentData.value['disabled'] != null ? parentData.value['disabled'] as boolean : false
+		}
+	})
+	
+	// 是否禁用label点击
+	const elLabelDisabled = computed((): boolean => {
+		let labelDisabledStr = props.labelDisabled
+		if (labelDisabledStr != '') {
+			if (labelDisabledStr == 'true') {
+				return true;
+			} else {
+				return false;
+			}
+		} else {
+			return parentData.value['labelDisabled'] != null ? parentData.value['labelDisabled'] as boolean : false
+		}
+	})
+	
+	// 组件尺寸，对应size的值，默认值为21px
+	const elSize = computed((): string => {
+		return props.size!.toString() != ''
+			? props.size!.toString()
+			: (parentData.value['size'] != null
+				? parentData.value['size'].toString()
+				: '21');
+	})
+	
+	// 组件的勾选图标的尺寸，默认12px
+	const elIconSize = computed((): string => {
+		return props.iconSize!.toString() != ''
+			? props.iconSize!.toString()
+			: (parentData.value['iconSize'] != null
+				? parentData.value['iconSize'].toString()
+				: '12');
+	})
+	
+	// 组件选中激活时的颜色
+	const elActiveColor = computed((): string => {
+		return props.activeColor != ''
+			? props.activeColor
+			: (parentData.value['activeColor'] != null
+				? parentData.value['activeColor'].toString() 
+				: '#2979ff');
+	})
+	
+	// 组件选未中激活时的颜色
+	const elInactiveColor = computed((): string => {
+		return props.inactiveColor != ''
+			? props.inactiveColor
+			: (parentData.value['inactiveColor'] != null
+				? parentData.value['inactiveColor'].toString() 
+				: '#c8c9cc');
+	})
+	
+	// label的颜色
+	const elLabelColor = computed((): string => {
+		return props.labelColor != null
+			? props.labelColor.toString()
+			: (parentData.value['labelColor'] != null
+				? parentData.value['labelColor'].toString() 
+				: '#606266');
+	})
+	
+	// 组件的形状
+	const elShape = computed((): string => {
+		return props.shape != null
+			? props.shape.toString()
+			: (parentData.value['shape'] != null
+				? parentData.value['shape'].toString() 
+				: 'circle');
+	})
+	
+	// label大小
+	const elLabelSize = computed((): string => {
+		return addUnit(props.labelSize != null
+			? props.labelSize.toString()
+			: (parentData.value['labelSize'] != null
+				? parentData.value['labelSize'].toString() 
+				: '15'));
+	})
+	
+	const elIconColor = computed((): string => {
+		const iconColor = props.iconColor.toString() != '' 
+			? props.iconColor.toString()
+			: (parentData.value['iconColor'] != null
+				? parentData.value['iconColor'].toString() 
+				: '#ffffff');
+		// 图标的颜色
+		if (elDisabled.value as boolean) {
+			// disabled状态下，已勾选的checkbox图标改为elInactiveColor
+			return isChecked.value ? elInactiveColor.value : 'transparent';
+		} else {
+			return isChecked.value ? iconColor : 'transparent';
+		}
+	})
+	
+	const iconClasses = computed((): string => {
+		let classes = [] as Array<string>
+		// 组件的形状
+		classes.push('up-checkbox__icon-wrap--' + elShape.value.toString())
+		if (elDisabled.value as boolean) {
+			classes.push('up-checkbox__icon-wrap--disabled')
+		}
+		if (isChecked.value && elDisabled.value as boolean) {
+			classes.push('up-checkbox__icon-wrap--disabled--checked')
+		}
+		let classStr = ""
+		classStr = classes.join(' ')
+		return classStr
+	})
+	
+	const iconWrapStyle = computed((): any => {
+		// checkbox的整体样式
+		const style = {};
+		style['backgroundColor'] = isChecked.value && !elDisabled.value ? elActiveColor.value : '#ffffff'
+		style['borderColor'] = isChecked.value && !elDisabled.value ? elActiveColor.value : elInactiveColor.value
+		style['width'] = addUnit(elSize.value)
+		style['height'] = addUnit(elSize.value)
+		// 如果是图标在右边的话，移除它的右边距
+		if (!props.usedAlone && parentData.value != null
+			&& parentData.value['iconPlacement'] != null) {
+			if (parentData.value['iconPlacement'].toString() == 'right') {
+				style['marginRight'] = 0
+			}
+		}
+		return style
+	})
+	
+	const checkboxStyle = computed((): any => {
+		const style = {};
+		if (!props.usedAlone && parentData.value != null && parentData.value['borderBottom'] != null) {
+			if (parentData.value['borderBottom']!.toString() == 'true' && parentData.value['placement'] == 'row') {
+				error('检测到您将borderBottom设置为true，需要同时将up-checkbox-group的placement设置为column才有效')
+			}
+			// 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
+			if (parentData.value['borderBottom']!.toString() == 'true' && parentData.value['placement'] == 'column') {
+				style['paddingBottom'] = '8px'
+			}
+		}
+		return deepMerge(style, addStyle(props.customStyle))
+	})
+	
+	// 判断是否单独使用
+	// 初始化
+	const init = function() {
+		if (!props.usedAlone) {
+			// 父组件的默认值
+			parentData.value = {
+				iconSize: 12,
+				labelDisabled: null,
+				disabled: null,
+				shape: 'square',
+				activeColor: null,
+				inactiveColor: null,
+				size: 18,
+				modelValue: null,
+				iconColor: null,
+				placement: 'row',
+				borderBottom: false,
+				iconPlacement: 'left'
+			}
+			getParentData('up-checkbox-group', instance, false)
+			if (parent.value == null) {
+				error('up-checkbox必须搭配up-checkbox-group组件使用')
+			}
+			const value = parentData.value['modelValue']
+			// console.log(value)
+			// 设置初始化时，是否默认选中的状态，父组件up-checkbox-group的value可能是array，所以额外判断
+			if (props.checked) {
+				isChecked.value = true;
+			} else if (value != null) {
+				const valueTmp: Array<any> = value as Array<any>
+				// console.log(value)x
+				// 查找数组是是否存在this.name元素值
+				if (valueTmp != null) {
+					// console.log('***', valueTmp)
+					const even = (element: any): boolean => element.toString() == props.name!.toString()
+					isChecked.value = valueTmp.some(even)
+				}
+			}
+		} else {
+			if (props.checked) {
+				isChecked.value = true
+			}
+		}
+	}
+	
+	// 发射事件
+	function emitEvent() {
+		emit('change', isChecked.value)
+		// 双向绑定
+		if (props.usedAlone) {
+			emit('update:checked', isChecked.value)
+		}
+		// 尝试调用up-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
+		setTimeout(() => {
+			// todo2026
+			// formValidate(instance, 'change')
+		}, 10);
+	}
+	
+	// 改变组件选中状态
+	// 这里的改变的依据是，更改本组件的checked值为true，同时通过父组件遍历所有up-checkbox实例
+	// 将本组件外的其他up-checkbox的checked都设置为false(都被取消选中状态)，因而只剩下一个为选中状态
+	function setRadioCheckedStatus() {
+		// 将本组件标记为与原来相反的状态
+		isChecked.value = !isChecked.value
+		emitEvent()
+		if (!props.usedAlone && parent.value != null) {
+			parent.value.$callMethod('unCheckedOther', instance)
+		}
+	}
+	
+	// 点击图标
+	function iconClickHandler(e: UniEvent) {
+		// 阻止事件冒泡
+		e.stopPropagation()
+		// 如果整体被禁用，不允许被点击
+		if (!elDisabled.value) {
+			setRadioCheckedStatus()
+		}
+	}
+	
+	// 横向两端排列时，点击组件即可触发选中事件
+	function wrapperClickHandler(e: UniEvent) {
+		if (!props.usedAlone && parentData.value != null
+			&& parentData.value['iconPlacement'] != null) {
+			if (parentData.value['iconPlacement'].toString() == 'right') {
+				iconClickHandler(e);
+			} else {
+				iconClickHandler(e);
+			}
+		} else {
+			iconClickHandler(e);
+		}
+	}
+	
+	// 点击label
+	function labelClickHandler(e: UniEvent) {
+		// 阻止事件冒泡
+		e.stopPropagation()
+		// 如果按钮整体被禁用或者label被禁用，则不允许点击文字修改状态
+		if (!elLabelDisabled.value && !elDisabled.value) {
+			setRadioCheckedStatus()
+		}
+	}
+	
+	// 监听 checked 属性变化
+	watch((): boolean => props.checked, (newVal: boolean) => {
+		if (newVal != isChecked.value) {
+			isChecked.value = newVal
+		}
+	})
+	
+	// 在组件挂载时初始化
+	onMounted(() => {
+		init()
+	})
+
+	const getInternalState = ():UTSJSONObject => {
+		return {
+			name: props.name,
+			isChecked: isChecked.value
+		}
+	}
+
+	defineExpose({
+		init,
+		getInternalState
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-checkbox-icon-wrap-margin-right:6px !default;
+	$up-checkbox-icon-wrap-font-size:6px !default;
+	$up-checkbox-icon-wrap-border-width:1px !default;
+	$up-checkbox-icon-wrap-border-color:#c8c9cc !default;
+	$up-checkbox-icon-wrap-icon-line-height:0 !default;
+	$up-checkbox-icon-wrap-circle-border-radius:99px !default;
+	$up-checkbox-icon-wrap-square-border-radius:3px !default;
+	$up-checkbox-icon-wrap-checked-color:#fff !default;
+	$up-checkbox-icon-wrap-checked-background-color:red !default;
+	$up-checkbox-icon-wrap-checked-border-color:#2979ff !default;
+	$up-checkbox-icon-wrap-disabled-background-color:#ebedf0 !default;
+	$up-checkbox-icon-wrap-disabled-checked-color:#c8c9cc !default;
+	$up-checkbox-label-margin-left:5px !default;
+	$up-checkbox-label-margin-right:12px !default;
+	$up-checkbox-label-color:$up-content-color !default;
+	$up-checkbox-label-font-size:15px !default;
+	$up-checkbox-label-disabled-color:#c8c9cc !default;
+
+	.up-checkbox {
+		/* #ifndef APP-NVUE */
+		@include flex(row);
+		/* #endif */
+		overflow: hidden;
+		flex-direction: row;
+		align-items: center;
+		margin-bottom: 5px;
+		margin-top: 5px;
+
+		&-label--left {
+			flex-direction: row
+		}
+
+		&-label--right {
+			flex-direction: row-reverse;
+			justify-content: space-between
+		}
+
+		&__icon-wrap {
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			// nvue下，border-color过渡有问题
+			transition-property: border-color, background-color, color;
+			transition-duration: 0.2s;
+			/* #endif */
+			color: $up-content-color;
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			color: transparent;
+			text-align: center;
+			margin-right: $up-checkbox-icon-wrap-margin-right;
+
+			font-size: $up-checkbox-icon-wrap-font-size;
+			border-width: $up-checkbox-icon-wrap-border-width;
+			border-color: $up-checkbox-icon-wrap-border-color;
+			border-style: solid;
+
+			/* #ifdef MP-TOUTIAO */
+			// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+			&__icon {
+				line-height: $up-checkbox-icon-wrap-icon-line-height;
+			}
+
+			/* #endif */
+
+			&--circle {
+				border-radius: $up-checkbox-icon-wrap-circle-border-radius;
+			}
+
+			&--square {
+				border-radius: $up-checkbox-icon-wrap-square-border-radius;
+			}
+
+			&--checked {
+				color: $up-checkbox-icon-wrap-checked-color;
+				background-color: $up-checkbox-icon-wrap-checked-background-color;
+				border-color: $up-checkbox-icon-wrap-checked-border-color;
+			}
+
+			&--disabled {
+				background-color: $up-checkbox-icon-wrap-disabled-background-color !important;
+			}
+
+			&--disabled--checked {
+				color: $up-checkbox-icon-wrap-disabled-checked-color !important;
+			}
+		}
+
+		&__label {
+			/* #ifndef APP-NVUE */
+			// word-wrap: break-word;
+			/* #endif */
+			margin-left: $up-checkbox-label-margin-left;
+			margin-right: $up-checkbox-label-margin-right;
+			color: $up-checkbox-label-color;
+			font-size: $up-checkbox-label-font-size;
+
+			&--disabled {
+				color: $up-checkbox-label-disabled-color;
+			}
+		}
+	}
+</style>