fs-uni-template/components/fs-radio-button/fs-radio-button.vue

<template>
	<view
		class="fs-radio-button"
		:class="[
			selected ? checkedColorType : 'fs-radio-button-default',
			{ 'fs-radio-button-radius': radius, 'fs-radio-button-round': round },
			buttonSize
		]"
		:style="{ color: checkedColor }"
		@click="handleToggle"
	>
		{{ label }}
		<slot />
	</view>
</template>

<script>
/**
 * 单选框组件
 * @description 单选框组件
 * @property {String} label 文本
 * @property {null} value 标识符(必须传)
 * @property {String} size = [mini | small | medium] 按钮大小
 * @property {String} checkedColor 选中颜色
 * @property {String} checkedColorType = [primary | danger | warning | info | success] 选中颜色类型
 */
export default {
	name: 'fs-radio-button'
}
</script>

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

const props = defineProps({
	label: String,
	value: {
		type: null,
		required: true
	},
	checkedColor: String,
	checkedColorType: String,
	size: {
		type: String,
		validator(value) {
			return ['mini', 'small', 'medium'].includes(value)
		}
	},
	checked: Boolean
})

const radioGroup = inject('radioGroup')
const { radius, round } = radioGroup
const checkedColorType = props.checkedColorType || radioGroup.checkedColorType
const checkedColor = props.checkedColor || radioGroup.checkedColor
const buttonSize = props.size || radioGroup.size

let selected = ref(props.checked)
watch(
	() => props.checked,
	val => {
		selected.value = val
	}
)

radioGroup.updateChildren({
	selected,
	value: props.value
})

const handleToggle = () => {
	radioGroup.updateValue(props.value)
}
</script>

<style lang="scss" scoped>
.fs-radio-button {
	padding: 10rpx 30rpx;
	white-space: nowrap;
	border: 2rpx solid currentColor;
	margin-right: 20rpx;
	margin-bottom: 20rpx;

	&-default {
		color: #999999;
	}

	&-radius {
		border-radius: var(--radius);
	}
	&-round {
		border-radius: 60rpx;
	}

	&.medium {
		padding: 8rpx 25rpx;
		font-size: 13px;
	}
	&.small {
		padding: 6rpx 20rpx;
		font-size: 12px;
	}
	&.mini {
		padding: 2rpx 15rpx;
		font-size: 11px;
	}
}
</style>