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

<template>
	<view
		class="fs-radio"
		:class="['fs-radio-' + justify, { 'fs-radio-reverse': reverse, 'fs-radio-inline': inline }]"
		@click="handleToggle"
	>
		<fs-icon
			v-if="icon"
			source="out"
			:type="selected ? selectIcon || icon : icon"
			:color-type="selected ? checkedColorType : 'gray'"
			:size="iconSize"
			:color="checkedColor"
		></fs-icon>
		<fs-icon
			v-else
			:type="selected ? 'icon-checked' : 'icon-uncheck'"
			:color-type="selected ? checkedColorType : 'gray'"
			:size="iconSize"
			:color="checkedColor"
		></fs-icon>
		<view class="fs-radio-lable">
			{{ label }}
			<slot />
		</view>
	</view>
</template>

<script>
/**
 * 单选框组件
 * @description 单选框组件
 * @property {String} label 文本
 * @property {String} icon 自定义图标
 * @property {String} iconSize 图标大小
 * @property {String} selectIcon 自定义选中图标
 * @property {null} value 标识符(必须传)
 * @property {String} checkedColor 选中颜色
 * @property {String} checkedColorType = [primary | danger | warning | info | success] 选中颜色类型
 */
export default {
	name: 'fs-radio'
}
</script>

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

const props = defineProps({
	label: String,
	iconSize: {
		type: String,
		default: '42rpx'
	},
	value: {
		type: null,
		required: true
	},
	icon: String,
	selectIcon: String,
	checkedColor: String,
	checkedColorType: {
		type: String,
		default: 'primary'
	}
})
const emits = defineEmits(['change'])

const radioGroup = inject('radioGroup')
const { reverse, justify, inline } = radioGroup

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 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 10rpx 0;

	&-lable {
		margin-left: 6rpx;
		margin-right: 20rpx;
	}

	&-reverse {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
	&-reverse &-lable {
		margin-left: 20rpx;
		margin-right: 6rpx;
	}
	&-right {
		justify-content: space-between;
	}
}
</style>