Switch 开关

引入

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

基础用法

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

    1. import { ref } from 'vue';
    3. export default {
    4.   setup() {
    5.     const checked = ref(true);
    6.     return { checked };
    7.   },
    8. };

    禁用状态

    通过 loading 属性设置开关为加载状态，加载状态下开关不可点击。

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

    自定义大小

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

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

    自定义颜色

    异步控制

    需要异步控制开关时，可以使用 modelValue 属性和 update:model-value 事件代替 v-model，并在事件回调函数中手动处理开关状态。

    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.       });
    15.     return {
    16.       checked,
    17.       onUpdateValue,
    18.     };
    19.   },
    20. };

    Props

    Events

    类型定义

    组件导出以下类型定义：

    1. import type { SwitchProps } from 'vant';