引入

import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';

Vue.use(Radio);
Vue.use(RadioGroup);

基礎用法

通過 v-model 綁定值當前選中項的 name。

<van-radio-group v-model="radio">
  <van-radio name="1">單選框 1</van-radio>
  <van-radio name="2">單選框 2</van-radio>
</van-radio-group>

export default {
  data() {
    return {
      radio: '1',
    };
  },
};

水平排列

將 direction 屬性設置為 horizontal 后，單選框組會變成水平排列。

<van-radio-group v-model="radio" direction="horizontal">
  <van-radio name="1">單選框 1</van-radio>
  <van-radio name="2">單選框 2</van-radio>
</van-radio-group>

禁用狀態(tài)

通過 disabled 屬性禁止選項切換，在 Radio 上設置 disabled 可以禁用單個選項。

<van-radio-group v-model="radio" disabled>
  <van-radio name="1">單選框 1</van-radio>
  <van-radio name="2">單選框 2</van-radio>
</van-radio-group>

自定義形狀

將 shape 屬性設置為 square，單選框的形狀會變成方形。

<van-radio-group v-model="radio">
  <van-radio name="1" shape="square">單選框 1</van-radio>
  <van-radio name="2" shape="square">單選框 2</van-radio>
</van-radio-group>

自定義顏色

通過 checked-color 屬性設置選中狀態(tài)的圖標顏色。

<van-radio-group v-model="radio">
  <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="radio">
  <van-radio name="1" icon-size="24px">單選框 1</van-radio>
  <van-radio name="2" icon-size="24px">單選框 2</van-radio>
</van-radio-group>

自定義圖標

通過 icon 插槽自定義圖標，并通過 slotProps 判斷是否為選中狀態(tài)。

<van-radio-group v-model="radio">
  <van-radio name="1">
    單選框 1
    <template #icon="props">
      <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
    </template>
  </van-radio>
  <van-radio name="2">
    單選框 2
    <template #icon="props">
      <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
    </template>
  </van-radio>
</van-radio-group>

<style>
  .img-icon {
    height: 20px;
  }
</style>

export default {
  data() {
    return {
      radio: '1',
      activeIcon: 'https://img01.yzcdn.cn/vant/user-active.png',
      inactiveIcon: 'https://img01.yzcdn.cn/vant/user-inactive.png',
    };
  },
};

禁用文本點擊

設置 label-disabled 屬性后，點擊圖標以外的內(nèi)容不會觸發(fā)單選框切換。

<van-radio-group v-model="radio">
  <van-radio name="1" label-disabled>單選框 1</van-radio>
  <van-radio name="2" label-disabled>單選框 2</van-radio>
</van-radio-group>

與 Cell 組件一起使用

此時你需要再引入 Cell 和 CellGroup 組件。

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

Radio Props

RadioGroup Props

Radio Events

RadioGroup Events

Radio Slots

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。