Switch スイッチ - Vant 4

Switch スイッチ

紹介

ON/OFF 状態の切り替えに使用します。

取り込み

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

import { createApp } from'vue'; import { Switch } from'vant'; const app = createApp(); app.use(Switch);

コード例

基本的な使い方

v-model で選択状態をバインドします。true は ON、false は OFF を表します。

import { ref } from'vue'; exportdefault { setup() { const checked = ref(true); return { checked }; }, };

無効状態

disabled でスイッチを無効化します。無効時はクリックできません。

読み込み状態

loading でローディング表示にします。ローディング時はクリックできません。

サイズのカスタマイズ

size でスイッチのサイズをカスタマイズします。

色のカスタマイズ

active-color は ON 時の背景色、inactive-color は OFF 時の背景色を表します。

ボタンのカスタマイズ

node スロットでボタン内容をカスタマイズします。

非同期制御

非同期制御が必要な場合は、v-model の代わりに modelValue と update:model-value を使用し、イベントで状態を手動更新します。

import { ref } from'vue'; import { showConfirmDialog } from'vant'; exportdefault { setup() { const checked = ref(true); constonUpdateValue = (newValue) => { showConfirmDialog({ title: '提醒', message: '是否切换开关？', }).then(() => { checked.value = newValue; }); }; return { checked, onUpdateValue, }; }, };

セルとの併用

API

Props

パラメータ	説明	型	デフォルト
v-model	スイッチの選択状態	any	false
loading	ローディング状態かどうか	boolean	false
disabled	無効状態かどうか	boolean	false
size	ボタンサイズ（デフォルト単位は px）	*number	string*
active-color	ON 時の背景色	string	#1989fa

| inactive-color | OFF 時の背景色 | string | rgba(120, 120, 128, 0.16) | | active-value | ON 時の値 | any | true | | inactive-value | OFF 時の値 | any | false |

Events

イベント名	説明	コールバック引数
change	スイッチの状態切り替え時に発火	value: any
click	クリック時に発火	event: MouseEvent

Slots

名前	説明	引数
node	ボタンの内容をカスタマイズ	-
background	スイッチの背景をカスタマイズ	-

型定義

コンポーネントは以下の型定義を提供します：

importtype { SwitchProps } from'vant';

テーマカスタマイズ

スタイル変数

以下の CSS 変数でスタイルをカスタマイズできます。使用方法は ConfigProvider コンポーネント を参照してください。

名称	デフォルト	説明
--van-switch-size	26px	-
--van-switch-width	calc(1.8em + 4px)	-
--van-switch-height	calc(1em + 4px)	-
--van-switch-node-size	1em	-
--van-switch-node-background	var(--van-white)	-
--van-switch-node-shadow	0 3px 1px 0 rgba(0, 0, 0, 0.05)	-
--van-switch-background	rgba(120, 120, 128, 0.16)	-
--van-switch-on-background	var(--van-primary-color)	-
--van-switch-duration	var(--van-duration-base)	-
--van-switch-disabled-opacity	var(--van-disabled-opacity)	-