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

<template>
	<fs-cell border justify="right" @click="handleToggle">
		<template #title>
			<view :class="selected ? checkedColorType : ''" :style="{ color: selected ? checkedColor : '' }">
				<slot>{{ label }}</slot>
			</view>
		</template>
		<template #value>
			<fs-icon type="icon-right" :colorType="checkedColorType" :color="checkedColor" v-if="selected"></fs-icon>
		</template>
	</fs-cell>
</template>

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

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

const props = defineProps({
	label: String,
	value: {
		type: null,
		required: true
	},
	checkedColor: String,
	checkedColorType: String,
	checked: Boolean
})

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

const radioGroup = inject('radioGroup')
const checkedColorType = props.checkedColorType || radioGroup.checkedColorType
const checkedColor = props.checkedColor || radioGroup.checkedColor

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

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

<style lang="scss" scoped></style>