You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.2 KiB
48 lines
1.2 KiB
<template>
|
|
<view class="l-radio-group" :class="'l-radio-group--'+ direction">
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
<script lang="uts" setup>
|
|
import { RadioGroupProps } from './type';
|
|
|
|
const emit = defineEmits(['change', 'update:modelValue'])
|
|
const props = withDefaults(defineProps<RadioGroupProps>(), {
|
|
allowUncheck: false,
|
|
disabled: false,
|
|
direction: 'horizontal'
|
|
// size: 'medium'
|
|
})
|
|
const innerValue = ref<any|null>(null);
|
|
const groupValue = computed({
|
|
set(value: any|null) {
|
|
innerValue.value = value
|
|
emit('update:modelValue', value)
|
|
emit('change', value)
|
|
},
|
|
get():any|null {
|
|
return props.value ?? 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 {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-radio-group--vertical {
|
|
flex-direction: column;
|
|
}
|
|
</style>
|