Radio 单选框

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

基础用法

通过 绑定值当前选中项的 name。

<van-radio-group v-model="checked">
  <van-radio name="1">单选框 1</van-radio>
  <van-radio name="2">单选框 2</van-radio>
</van-radio-group>

import { ref } from 'vue';
export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};

水平排列

将 direction 属性设置为 horizontal 后，单选框组会变成水平排列。

<van-radio-group v-model="checked" direction="horizontal">
  <van-radio name="1">单选框 1</van-radio>
  <van-radio name="2">单选框 2</van-radio>
</van-radio-group>

禁用状态

自定义形状

将 shape 属性设置为 square，单选框的形状会变成方形。

<van-radio-group v-model="checked">
  <van-radio name="1" shape="square">单选框 1</van-radio>
  <van-radio name="2" shape="square">单选框 2</van-radio>
</van-radio-group>

通过 checked-color 属性设置选中状态的图标颜色。

  <van-radio name="1" checked-color="#ee0a24">单选框 1</van-radio>
  <van-radio name="2" checked-color="#ee0a24">单选框 2</van-radio>
</van-radio-group>

自定义大小

通过 icon-size 属性可以自定义图标的大小。

<van-radio-group v-model="checked">
  <van-radio name="1" icon-size="24px">单选框 1</van-radio>
  <van-radio name="2" icon-size="24px">单选框 2</van-radio>
</van-radio-group>

自定义图标

import { ref } from 'vue';
export default {
  setup() {
    return {
      checked,
      activeIcon: 'https://cdn.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactiveIcon:
        'https://cdn.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
  },
};

禁用文本点击

设置 label-disabled 属性后，点击图标以外的内容不会触发单选框切换。

<van-radio-group v-model="checked">
  <van-radio name="1" label-disabled>单选框 1</van-radio>
  <van-radio name="2" label-disabled>单选框 2</van-radio>
</van-radio-group>

搭配单元格组件使用

搭配单元格组件使用时，需要再引入 和 CellGroup 组件。

<van-radio-group v-model="checked">
  <van-cell-group inset>
    <van-cell title="单选框 1" clickable @click="checked = '1'">
      <template #right-icon>
        <van-radio name="1" />
      </template>
    </van-cell>
    <van-cell title="单选框 2" clickable @click="checked = '2'">
      <template #right-icon>
        <van-radio name="2" />
      </template>
    </van-cell>
  </van-cell-group>
</van-radio-group>

Radio Props

Radio Events

RadioGroup Events

Radio Slots

类型定义

组件导出以下类型定义：

样式变量