Switch 开关

引入

基础用法

通过 绑定开关的选中状态，true 表示开，false 表示关。

  1. <van-switch v-model="checked" />
  2. export default {
  3.   setup() {
  4.     const checked = ref(true);
  5.     return { checked };
  6.   },
  7. };

禁用状态

通过 disabled 属性来禁用开关，禁用状态下开关不可点击。

  1. <van-switch v-model="checked" loading />

自定义大小

通过 size 属性自定义开关的大小。

  1. <van-switch v-model="checked" size="24px" />

自定义颜色

active-color 属性表示打开时的背景色，inactive-color 表示关闭时的背景色。

异步控制

  1. <van-switch :model-value="checked" @update:model-value="onUpdateValue" />
  1. import { ref } from 'vue';
  2. import { Dialog } from 'vant';
  4. export default {
  5.   setup() {
  6.     const onUpdateValue = (newValue) => {
  7.       Dialog.confirm({
  8.         title: '提醒',
  9.         message: '是否切换开关？',
  10.       }).then(() => {
  11.         checked.value = newValue;
  12.       });
  13.     };
  15.     return {
  16.       checked,
  17.       onUpdateValue,
  18.     };
  20. };

API

Props

Events

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。