Radio 单选框 ​

<template>
  <f-radio-group v-model="radio1">
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2">备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const radio1 = ref('1')
</script>

<template>
  <f-radio-group v-model="radio2" background>
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2">备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const radio2 = ref('1')
</script>

<template>
  <f-radio-group v-model="radio4" background size="large">
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2">备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>

  <f-radio-group v-model="radio4" background size="middle">
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2">备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>

  <f-radio-group v-model="radio4" background size="small">
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2">备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>

  <f-radio-group v-model="radio4" background size="mini">
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2">备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const radio4 = ref('1')
</script>

<template>
  <f-radio-group v-model="radio5" vertical>
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2">备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const radio5 = ref('1')
</script>

<template>
  <f-radio-group v-model="radio6" disabled>
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2">备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>

  <f-radio-group v-model="radio6">
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2" disabled>备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>

  <f-radio-group v-model="radio6" background>
    <f-radio label="1">备选项1</f-radio>
    <f-radio label="2" disabled>备选项2</f-radio>
    <f-radio label="3">备选项3</f-radio>
  </f-radio-group>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const radio6 = ref('1')
</script>