51 lines
971 B
Vue
51 lines
971 B
Vue
<template>
|
|
<radio-group class="radio-group" :value="modelValue" @change="handleChange">
|
|
<slot></slot>
|
|
</radio-group>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { provide, computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: '',
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue', 'change'])
|
|
|
|
// 处理变更
|
|
const handleChange = (e: any) => {
|
|
const value = e.detail.value
|
|
emit('update:modelValue', value)
|
|
emit('change', value)
|
|
}
|
|
|
|
// 切换选项
|
|
const toggleOption = (value: string | number) => {
|
|
emit('update:modelValue', value)
|
|
emit('change', value)
|
|
}
|
|
|
|
// 提供给radio的上下文
|
|
provide('radioGroup', {
|
|
modelValue: computed(() => props.modelValue),
|
|
disabled: computed(() => props.disabled),
|
|
toggleOption,
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.radio-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
</style>
|