Radio 单选框

在一组备选项中进行单选

基本用法

单选框不应该有太多的可选项， 如果你有很多的可选项你应该使用选择框而不是单选框。

选项0

选项1

选项2

<template>
  <ImRadioGroup v-model="value">
    <ImRadio
      v-for="item in arr"
      :key="item.value"
      :label="item.label"
      :value="item.value"></ImRadio>
  </ImRadioGroup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const value = ref(1);
const arr = new Array(3).fill(0).map((_, index) => ({
  value: index,
  label: `选项${index}`,
}));
</script>

垂直方向

通过设置 vertical 属性为 true 可以使单选框垂直排列

选项0

选项1

选项2

<template>
  <ImRadioGroup v-model="value" vertical>
  <ImRadio
    v-for="item in arr"
    :key="item.value"
    :label="item.label"
    :value="item.value"></ImRadio>
</ImRadioGroup>
</template>

单选按钮

设置 variant="button" 可以将单选框变为按钮样式。

选项0

选项1

选项2

<template>
  <ImRadioGroup v-model="value" variant="button">
    <ImRadio
      v-for="item in arr"
      :key="item.value"
      :label="item.label"
      :value="item.value"></ImRadio>
  </ImRadioGroup>
</template>

垂直方向按钮

选项0

选项1

选项2

size 属性

通过设置 size 属性可以控制单选框的大小

选项0

选项1

选项2

选项0

选项1

选项2

<template>
  <ImRadioGroup v-model="value" size="48">
    <ImRadio
      v-for="item in arr"
      :key="item.value"
      :label="item.label"
      :value="item.value"></ImRadio>
  </ImRadioGroup>

  <ImRadioGroup v-model="value" size="48" variant="button">
    <ImRadio
      v-for="item in arr"
      :key="item.value"
      :label="item.label"
      :value="item.value"></ImRadio>
  </ImRadioGroup>
</template>

disabled 属性

通过设置 disabled 属性禁用

选项0

选项1

选项2

<template>
  <ImRadioGroup v-model="value">
    <ImRadio
      v-for="item in arr"
      disabled
      :key="item.value"
      :label="item.label"
      :value="item.value"></ImRadio>
  </ImRadioGroup>
</template>

readonly 属性

通过设置 readonly 属性只读

选项0

选项1

选项2

<template>
  <ImRadioGroup v-model="value">
    <ImRadio
      v-for="item in arr"
      readonly
      :key="item.value"
      :label="item.label"
      :value="item.value"></ImRadio>
  </ImRadioGroup>
</template>

API

RadioGroupProps

字段名	类型	描述
modelValue	string | number | null	绑定的值
disabled	boolean	是否禁用，默认为false
readonly	boolean	是否只读，默认为false
size	number | string	大小
vertical	boolean	是否垂直排列，默认为false
variant	'button' | ''	变体类型，默认为空字符串

RadioProps

字段名	类型	描述
value	string | number	单个选项的值
label	string	标签文本
disabled	boolean	是否禁用，默认为false
readonly	boolean	是否只读，默认为false