uview-ultra 4.5.46

package/components/up-radio/up-radio.uvue

@@ -0,0 +1,512 @@
+<template>
+	<view
+	    class="up-radio cursor-pointer"
+		@tap.stop="wrapperClickHandler"
+	    :style="[radioStyle]"
+	    :class="[`up-radio-label--${parentData['iconPlacement']}`,
+			(parentData['borderBottom'] != '' && parentData['placement'] === 'column')
+			? 'up-border-bottom' : '']"
+	>
+		<view
+		    class="up-radio__icon-wrap cursor-pointer"
+		    @tap.stop="iconClickHandler"
+		    :class="iconClasses"
+		    :style="iconWrapStyle"
+		>
+			<slot name="icon" :elIconSize="elIconSize" :elIconColor="elIconColor" :checked="checked" :elDisabled="elDisabled">
+				<up-icon
+				    class="up-radio__icon-wrap__icon"
+				    name="checkbox-mark"
+				    :size="elIconSize"
+				    :color="elIconColor"
+				/>
+			</slot>
+		</view>
+		<view class="u-radio__label-wrap cursor-pointer" @tap.stop="labelClickHandler">
+			<slot name="label">
+				<text
+					class="up-radio__text"
+					:style="{
+						color: elDisabled ? elInactiveColor : elLabelColor,
+						fontSize: elLabelSize,
+						lineHeight: elLabelSize
+					}"
+				>{{label}}</text>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { computed, getCurrentInstance, nextTick, onMounted, ref } from 'vue';
+	import defProps from './radio.uts';
+	import { addUnit, addStyle, os, deepMerge, formValidate, error } from '../../libs/function/index.uts';
+	import { useUltraUI } from '../../libs/composable/useUltraUI.uts';
+	/**
+	 * radio 单选框
+	 * @author jry ijry@qq.com
+	 * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配up-radio-group使用
+	 * @tutorial https://ijry.github.io/uview-plus/components/radio.html
+	 * @property {String | Number}	name			radio的名称
+	 * @property {String}			shape			形状，square为方形，circle为圆型
+	 * @property {Boolean}			disabled		是否禁用
+	 * @property {String | Boolean}	labelDisabled	是否禁止点击提示语选中单选框
+	 * @property {String}			activeColor		选中时的颜色，如设置parent的active-color将失效
+	 * @property {String}			inactiveColor	未选中的颜色
+	 * @property {String | Number}	iconSize		图标大小，单位px
+	 * @property {String | Number}	labelSize		label字体大小，单位px
+	 * @property {String | Number}	label			label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+	 * @property {String | Number}	size			整体的大小
+	 * @property {String}			iconColor		图标颜色
+	 * @property {String}			labelColor		label的颜色
+	 * @property {Object}			customStyle		组件的样式，对象形式
+	 * 
+	 * @event {Function} change 某个radio状态发生变化时触发(选中状态)
+	 * @example <up-radio :labelDisabled="false">门掩黄昏，无计留春住</up-radio>
+	 */
+	const { parent, parentData, getParentData } = useUltraUI({
+		iconSize: '12px',
+		labelDisabled: false,
+		labelColor: '',
+		labelSize: '',
+		disabled: false,
+		shape: '',
+		activeColor: '',
+		inactiveColor: '',
+		size: '18px',
+		value: '',
+		modelValue: '',
+		iconColor: '',
+		placement: 'row',
+		borderBottom: false,
+		iconPlacement: 'left'
+	} as UTSJSONObject)
+	const instance = getCurrentInstance()!.proxy!
+
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: "up-radio"
+	})
+
+	const props = defineProps({
+		// radio的名称
+		name: {
+			type: [String, Number, Boolean],
+			default: (defProps['radio'] as UTSJSONObject)['name']
+		},
+		// 形状，square为方形，circle为圆型
+		shape: {
+			type: String,
+			default: (defProps['radio'] as UTSJSONObject)['shape']
+		},
+		// 是否禁用
+		disabled: {
+			type: [String, Boolean],
+			default: (defProps['radio'] as UTSJSONObject)['disabled']
+		},
+		// 是否禁止点击提示语选中单选框
+		labelDisabled: {
+			type: [String, Boolean],
+			default: (defProps['radio'] as UTSJSONObject)['labelDisabled']
+		},
+		// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
+		activeColor: {
+			type: String,
+			default: (defProps['radio'] as UTSJSONObject)['activeColor']
+		},
+		// 未选中的颜色
+		inactiveColor: {
+			type: String,
+			default: (defProps['radio'] as UTSJSONObject)['inactiveColor']
+		},
+		// 图标的大小，单位px
+		iconSize: {
+			type: [String, Number],
+			default: (defProps['radio'] as UTSJSONObject)['iconSize']
+		},
+		// label的字体大小，px单位
+		labelSize: {
+			type: [String, Number],
+			default: (defProps['radio'] as UTSJSONObject)['labelSize']
+		},
+		// label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+		label: {
+			type: [String, Number],
+			default: (defProps['radio'] as UTSJSONObject)['label']
+		},
+		// 整体的大小
+		size: {
+			type: [String, Number],
+			default: (defProps['radio'] as UTSJSONObject)['size']
+		},
+		// 图标颜色
+		color: {
+			type: String,
+			default: (defProps['radio'] as UTSJSONObject)['color']
+		},
+		// label的颜色
+		labelColor: {
+			type: String,
+			default: (defProps['radio'] as UTSJSONObject)['labelColor']
+		},
+		// 图标颜色
+		iconColor: {
+			type: String,
+			default: (defProps['radio'] as UTSJSONObject)['iconColor']
+		},
+		customStyle: {
+			type: [Object, String],
+			default: () => ({})
+		}
+	})
+
+	const emit = defineEmits(["change"])
+	const checked = ref(false)
+
+	// 是否禁用，如果父组件up-raios-group禁用的话，将会忽略子组件的配置
+	const elDisabled = computed((): boolean => {
+		// @ts-ignore
+		let disabledStr = props.disabled.toString()
+		if (disabledStr !== '') {
+			if (disabledStr == 'true') {
+				return true
+			}
+			return false
+		}
+		return parentData.value['disabled'] as boolean
+	})
+
+	// 是否禁用label点击
+	const elLabelDisabled = computed((): boolean => {
+		// @ts-ignore
+		let labelDisabledStr = props.labelDisabled.toString()
+		if (labelDisabledStr !== '') {
+			if (labelDisabledStr == 'true') {
+				return true
+			}
+			return false
+		}
+		return parentData.value['labelDisabled'] as boolean
+	})
+
+	// 组件尺寸，对应size的值，默认值为21px
+	const elSize = computed((): string => {
+		const sizeValue = props.size
+		if (sizeValue != null && sizeValue.toString() != '') {
+			return sizeValue.toString()
+		}
+		const parentSize = parentData.value['size']
+		return parentSize != null && parentSize.toString() != '' ? parentSize.toString() : '21px'
+	})
+
+	// 组件的勾选图标的尺寸，默认12px
+	const elIconSize = computed((): string => {
+		const iconSizeValue = props.iconSize
+		if (iconSizeValue != null && iconSizeValue.toString() != '') {
+			return iconSizeValue.toString()
+		}
+		const parentIconSize = parentData.value['iconSize']
+		return parentIconSize != null && parentIconSize.toString() != '' ? parentIconSize.toString() : '12px'
+	})
+
+	// 组件选中激活时的颜色
+	const elActiveColor = computed((): string => {
+		return props.activeColor as string != ''
+			? props.activeColor as string
+			: (parentData.value['activeColor'] as string != '' ? parentData.value['activeColor'] as string : '#2979ff')
+	})
+
+	// 组件选未中激活时的颜色
+	const elInactiveColor = computed((): string => {
+		return props.inactiveColor as string != ''
+			? props.inactiveColor as string
+			: (parentData.value['inactiveColor'] as string != '' ? parentData.value['inactiveColor'] as string : '#c8c9cc')
+	})
+
+	// label的颜色
+	const elLabelColor = computed((): string => {
+		return props.labelColor as string != ''
+			? props.labelColor as string
+			: (parentData.value['labelColor'] as string != '' ? parentData.value['labelColor'] as string : '#606266')
+	})
+
+	// 组件的形状
+	const elShape = computed((): string => {
+		return props.shape as string != ''
+			? props.shape as string
+			: (parentData.value['shape'] as string != '' ? parentData.value['shape'] as string : 'circle')
+	})
+
+	// label大小
+	const elLabelSize = computed((): string => {
+		const labelSizeValue = props.labelSize
+		if (labelSizeValue != null && labelSizeValue.toString() != '') {
+			return addUnit(labelSizeValue.toString())
+		}
+		const parentLabelSize = parentData.value['labelSize']
+		return addUnit(parentLabelSize != null && parentLabelSize.toString() != '' ? parentLabelSize.toString() : '15')
+	})
+
+	const elIconColor = computed((): string => {
+		const iconColorValue = props.iconColor
+		const parentIconColor = parentData.value['iconColor']
+		const iconColor = iconColorValue != null && iconColorValue.toString() != ''
+			? iconColorValue.toString()
+			: (parentIconColor != null && parentIconColor.toString() != '' ? parentIconColor.toString() : '#ffffff')
+		// 图标的颜色
+		if (elDisabled.value) {
+			// disabled状态下，已勾选的radio图标改为elInactiveColor
+			return checked.value ? elInactiveColor.value : 'transparent'
+		}
+		return checked.value ? iconColor : 'transparent'
+	})
+
+	const iconClasses = computed((): string => {
+		let classes: string[] = []
+		// 组件的形状
+		classes.push('up-radio__icon-wrap--' + elShape.value)
+		if (elDisabled.value) {
+			classes.push('up-radio__icon-wrap--disabled')
+		}
+		if (checked.value) {
+			if (elDisabled.value) {
+				classes.push('up-radio__icon-wrap--disabled--checked')
+			} else {
+				classes.push('up-radio__icon-wrap--checked')
+			}
+		}
+		return classes.join(' ')
+	})
+
+	const iconWrapStyle = computed((): any => {
+		// radio的整体样式
+		const style = {}
+		style['backgroundColor'] = checked.value && !elDisabled.value ? elActiveColor.value : '#ffffff'
+		style['borderColor'] = checked.value && !elDisabled.value ? elActiveColor.value : elInactiveColor.value
+		style['width'] = addUnit(elSize.value)
+		style['height'] = addUnit(elSize.value)
+		// 如果是图标在右边的话，移除它的右边距
+		if (parentData.value['iconPlacement'] === 'right') {
+			style['marginRight'] = 0
+		}
+		return style
+	})
+
+	const radioStyle = computed((): any => {
+		const style = {}
+		if (parentData.value['borderBottom'] != null && parentData.value['borderBottom'].toString() == 'true'
+			&& parentData.value['placement'] != null && parentData.value['placement'].toString() == 'row') {
+			error('检测到您将borderBottom设置为true，需要同时将up-radio-group的placement设置为column才有效')
+		}
+		// 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
+		if (parentData.value['borderBottom'] != null && parentData.value['borderBottom'].toString() == 'true'
+			&& parentData.value['placement'] != null && parentData.value['placement'].toString() == 'column') {
+			// ios像素密度高，需要多一点的距离
+			style['paddingBottom'] = os() === 'ios' ? '12px' : '8px'
+		}
+		return deepMerge(style, addStyle(props.customStyle))
+	})
+
+	const updateParentData = (): void => {
+		getParentData('up-radio-group', instance, false)
+	}
+
+	const init = (): void => {
+		// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+		updateParentData()
+		if (parent.value == null) {
+			error('up-radio必须搭配up-radio-group组件使用')
+		}
+		// 设置初始化时，是否默认选中的状态
+		// @ts-ignore
+		checked.value = props.name === parentData.value['modelValue']
+	}
+
+	const emitEvent = (): void => {
+		// up-radio的checked不为true时(意味着未选中)，才发出事件，避免多次点击触发事件
+		if (!checked.value) {
+			emit('change', props.name)
+			// 尝试调用up-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
+			nextTick(() => {
+				formValidate(instance, 'change')
+			})
+		}
+	}
+
+	// 改变组件选中状态
+	const setRadioCheckedStatus = (): void => {
+		emitEvent()
+		// 将本组件标记为选中状态
+		checked.value = true
+		if (parent.value != null) {
+			parent.value.$callMethod('unCheckedOther', instance)
+		}
+	}
+
+	// 点击图标
+	const iconClickHandler = (e: UniPointerEvent): void => {
+		e.stopPropagation()
+		// 如果整体被禁用，不允许被点击
+		if (!elDisabled.value) {
+			setRadioCheckedStatus()
+		}
+	}
+
+	// 横向两端排列时，点击组件即可触发选中事件
+	const wrapperClickHandler = (e: UniPointerEvent): void => {
+		if (parentData.value['iconPlacement'] === 'right') {
+			iconClickHandler(e)
+		}
+	}
+
+	// 点击label
+	const labelClickHandler = (e: UniPointerEvent): void => {
+		e.stopPropagation()
+		// 如果按钮整体被禁用或者label被禁用，则不允许点击文字修改状态
+		if (!elLabelDisabled.value && !elDisabled.value) {
+			setRadioCheckedStatus()
+		}
+	}
+
+	const setChecked = (value: boolean): void => {
+		checked.value = value
+	}
+
+	const getInternalState = (): UTSJSONObject => {
+		return {
+			name: props.name,
+			checked: checked.value
+		} as UTSJSONObject
+	}
+
+	onMounted(() => {
+		init()
+	})
+
+	defineExpose({
+		checked,
+		parentData,
+		elDisabled,
+		elLabelDisabled,
+		elSize,
+		elIconSize,
+		elActiveColor,
+		elInactiveColor,
+		elLabelColor,
+		elShape,
+		elLabelSize,
+		elIconColor,
+		iconClasses,
+		iconWrapStyle,
+		radioStyle,
+		init,
+		updateParentData,
+		iconClickHandler,
+		wrapperClickHandler,
+		labelClickHandler,
+		emitEvent,
+		setRadioCheckedStatus,
+		setChecked,
+		getInternalState
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-radio-wrap-margin-right:6px !default;
+	$up-radio-wrap-font-size:20px !default;
+	$up-radio-wrap-border-width:1px !default;
+	$up-radio-wrap-border-color: #c8c9cc !default;
+	$up-radio-line-height:0 !default;
+	$up-radio-circle-border-radius:50px !default;
+	$up-radio-square-border-radius:3px !default;
+	$up-radio-checked-color:#fff !default;
+	$up-radio-checked-background-color:red !default;
+	$up-radio-checked-border-color: #2979ff !default;
+	$up-radio-disabled-background-color:#ebedf0 !default;
+	$up-radio-disabled--checked-color:#c8c9cc !default;
+	$up-radio-label-margin-left: 5px !default;
+	$up-radio-label-margin-right:12px !default;
+	$up-radio-label-color:$up-content-color !default;
+	$up-radio-label-font-size:15px !default;
+	$up-radio-label-disabled-color:#c8c9cc !default;
+	
+	.up-radio {
+		@include flex(row);
+		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-radio-wrap-margin-right;
+			// font-size: $up-radio-wrap-font-size;
+			border-width: $up-radio-wrap-border-width;
+			border-color: $up-radio-wrap-border-color;
+			border-style: solid;
+
+			/* #ifdef MP-TOUTIAO */
+			// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+			&__icon {
+				line-height: $up-radio-line-height;
+			}
+
+			/* #endif */
+
+			&--circle {
+				border-radius: $up-radio-circle-border-radius;
+			}
+
+			&--square {
+				border-radius: $up-radio-square-border-radius;
+			}
+
+			&--checked {
+				color: $up-radio-checked-color;
+				background-color: $up-radio-checked-background-color;
+				border-color: $up-radio-checked-border-color;
+			}
+
+			&--disabled {
+				background-color: $up-radio-disabled-background-color !important;
+			}
+
+			&--disabled--checked {
+				color: $up-radio-disabled--checked-color !important;
+			}
+		}
+
+		&__label {
+			margin-left: $up-radio-label-margin-left;
+			margin-right: $up-radio-label-margin-right;
+			color: $up-radio-label-color;
+			font-size: $up-radio-label-font-size;
+
+			&--disabled {
+				color: $up-radio-label-disabled-color;
+			}
+		}
+	}
+</style>