Vant4 Radio 單選框

2023-02-16 17:55 更新

介紹

在一組備選項(xiàng)中進(jìn)行單選。

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

const app = createApp();
app.use(Radio);
app.use(RadioGroup);

代碼演示

基礎(chǔ)用法

通過(guò) ?v-model? 綁定值當(dāng)前選中項(xiàng)的 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? 屬性設(shè)置為 ?horizontal? 后,單選框組會(huì)變成水平排列。

<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>

禁用狀態(tài)

通過(guò) ?disabled? 屬性禁止選項(xiàng)切換,在 ?Radio? 上設(shè)置 ?disabled? 可以禁用單個(gè)選項(xiàng)。

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

自定義形狀

將 ?shape? 屬性設(shè)置為 ?square?,單選框的形狀會(huì)變成方形。

<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>

自定義顏色

通過(guò) ?checked-color? 屬性設(shè)置選中狀態(tài)的圖標(biāo)顏色。

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

自定義大小

通過(guò) ?icon-size? 屬性可以自定義圖標(biāo)的大小。

<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>

自定義圖標(biāo)

通過(guò) ?icon? 插槽自定義圖標(biāo),并通過(guò) ?slotProps? 判斷是否為選中狀態(tài)。

<van-radio-group v-model="checked">
  <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>
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return {
      checked,
      activeIcon:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactiveIcon:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
  },
};

禁用文本點(diǎn)擊

設(shè)置 ?label-disabled? 屬性后,點(diǎn)擊圖標(biāo)以外的內(nèi)容不會(huì)觸發(fā)單選框切換。

<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>

搭配單元格組件使用

搭配單元格組件使用時(shí),需要再引入 ?Cell? 和 ?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>

API

Radio Props

參數(shù) 說(shuō)明 類型 默認(rèn)值
name 標(biāo)識(shí)符,通常為一個(gè)唯一的字符串或數(shù)字 any -
shape 形狀,可選值為 square string round
disabled 是否為禁用狀態(tài) boolean false
label-disabled 是否禁用文本內(nèi)容點(diǎn)擊 boolean false
label-position 文本位置,可選值為 left string right
icon-size 圖標(biāo)大小,默認(rèn)單位為 px number | string 20px
checked-color 選中狀態(tài)顏色 string #1989fa

RadioGroup Props

參數(shù) 說(shuō)明 類型 默認(rèn)值
v-model 當(dāng)前選中項(xiàng)的標(biāo)識(shí)符 any -
disabled 是否禁用所有單選框 boolean false
direction 排列方向,可選值為 horizontal string vertical
icon-size 所有單選框的圖標(biāo)大小,默認(rèn)單位為 px number | string 20px
checked-color 所有單選框的選中狀態(tài)顏色 string #1989fa

Radio Events

事件名 說(shuō)明 回調(diào)參數(shù)
click 點(diǎn)擊單選框時(shí)觸發(fā) event: MouseEvent

RadioGroup Events

事件名 說(shuō)明 回調(diào)參數(shù)
change 當(dāng)綁定值變化時(shí)觸發(fā)的事件 name: string

Radio Slots

名稱 說(shuō)明 參數(shù)
default 自定義文本 -
icon 自定義圖標(biāo) { checked: boolean, disabled: boolean }

類型定義

組件導(dǎo)出以下類型定義:

import type {
  RadioProps,
  RadioShape,
  RadioGroupProps,
  RadioLabelPosition,
  RadioGroupDirection,
} from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。

名稱 默認(rèn)值 描述
--van-radio-size 20px -
--van-radio-border-color var(--van-gray-5) -
--van-radio-duration var(--van-duration-fast) -
--van-radio-label-margin var(--van-padding-xs) -
--van-radio-label-color var(--van-text-color) -
--van-radio-checked-icon-color var(--van-primary-color) -
--van-radio-disabled-icon-color var(--van-gray-5) -
--van-radio-disabled-label-color var(--van-text-color-3) -
--van-radio-disabled-background var(--van-border-color) -


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)