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

<template>
	<view class="fs-radio-group" :class="{ inline }"><slot></slot></view>
</template>

<script>
/**
 * 单选框组组件
 * @description 单选框组组件
 * @property {String} justify 图标对齐方式
 * @property {Boolean} reverse 是否反转
 * @property {Boolean} inline 单行显示
 * @property {Boolean} radius 是否圆角(仅对按钮样式有效)
 * @property {Boolean} round 是否半圆(仅对按钮样式有效)
 * @property {String} checkedColor 选中颜色
 * @property {String} checkedColorType = [primary | danger | warning | info | success] 选中颜色类型
 * @property {String} size = [mini | small | medium] 按钮大小(仅对按钮样式有效)
 * @event {Function} change change事件
 */
export default {
	name: 'fs-radio-group'
}
</script>

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

const props = defineProps({
	justify: String,
	reverse: Boolean,
	inline: Boolean,
	checkedColor: String,
	checkedColorType: {
		type: String,
		default: 'primary',
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
		}
	},
	radius: Boolean,
	round: Boolean,
	size: {
		type: String,
		validator(value) {
			return ['mini', 'small', 'medium'].includes(value)
		}
	},
	modelValue: String
})
const emits = defineEmits(['update:modelValue', 'change'])

const state = reactive({
	selectedValue: props.modelValue,
	children: []
})
watch(
	() => props.modelValue,
	val => {
		state.selectedValue = val
	}
)

const radioStrategy = value => {
	state.children.forEach(item => {
		item.selected = item.value === state.selectedValue
	})
}
const updateChildren = child => {
	state.children.push(child)
	radioStrategy()
}
const updateValue = value => (state.selectedValue = value)

watch(
	() => state.selectedValue,
	val => {
		radioStrategy()
		emits('update:modelValue', val)
		emits('change', val)
	}
)

provide('radioGroup', {
	...props,
	updateChildren,
	updateValue
})
</script>

<style lang="scss">
.fs-radio-group {
	&.inline {
		display: flex;
		flex-wrap: wrap;
	}
}
</style>