单选框 Radio ​

选择一组互斥数据中的某一个选项

基础用法 ​

基础单选框的使用方式。

<template>
  <bp-space>
    <bp-radio v-model="val" :value="0">Option</bp-radio>
    <bp-radio disabled :value="1">Disabled option</bp-radio>
  </bp-space>
</template>

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

const val = ref(0);
</script>

单选框组 ​

通过外层包裹 radio-group 实现选项组

<template>
  <bp-radio-group v-model="val" type="button">
    <template v-for="v in optionList">
      <bp-radio :value="v.value">{{ v.label }}</bp-radio>
    </template>
  </bp-radio-group>
</template>

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

const val = ref(0);
const optionList = [
  { value: 0, label: "Option 1" },
  { value: 1, label: "Option 2" },
  { value: 2, label: "Option 3" },
];
</script>

Radio 属性 ​

v-model
单选框绑定值
StringNumberBoolean
-
value
选项的值
StringNumberBoolean
-
disabled
是否禁用
Boolean
false
type
单选框类型
Enum
radio

Radio 事件 ​

change
选项值改变触发
value

RadioGroup 属性 ​

v-model
绑定值
StringNumber
-
disabled
是否禁用
Boolean
false
type
单选框组类型
Enum
radio
direction
排列方向
Enum
horizontal

RadioGroup 事件 ​

change
选项值改变触发
-
-