contract-front/uni_modules/lime-radio/components/l-radio-group/l-radio-group.vue

<template>
	<view class="l-radio-group" :class="'l-radio-group--'+ direction">
		<slot />
	</view>
</template>
<script lang="ts">
	// @ts-nocheck
	import { defineComponent, provide, ref, computed } from '@/uni_modules/lime-shared/vue'
	import radioGroupProps from './props'
	const name = 'l-radio-group'
	export default defineComponent({
		name,
		props: radioGroupProps,
		emits: ['update:value', 'update:modelValue', 'change', 'input'],
		setup(props, { emit }) {
			const innerValue = ref<any|null>(null);
			const groupValue = computed({
				set(value: any|null) {
					innerValue.value = value;
					emit('update:modelValue', value)
					emit('change', value)
					// #ifdef VUE2
					emit('input', value)
					// #endif
				},
				get():any|null {
					return props.value || props.name || props.modelValue || props.defaultValue || innerValue.value
				}
			} as WritableComputedOptions<any|null>)
			
			const handleRadioChange = (val: any) => {
				if (props.allowUncheck && val == groupValue.value) {
					groupValue.value = ''
				} else {
					groupValue.value = val
				}
			}
			provide('limeRadioGroupProps', props)
			provide('limeRadioGroupValue', groupValue)
			provide('limeRadioGroupChange', handleRadioChange)
			
		}
	})
</script>
<style lang="scss">
	// .l-radio-group {
	// 	display: flex;
	// 	flex-direction: row;
	// }

	// .l-radio-group--vertical {
	// 	flex-direction: column;
	// }
	
	.l-radio-group {
		// background-color: antiquewhite;
	}
	
	.l-radio-group--vertical {
		:deep(.l-radio) {
			display: flex;
			// line-height: 64rpx;
		}
	
		:deep(l-radio) {
			display: flex;
			// line-height: 64rpx;
		}
	}
</style>