Switch 开关

引入

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

基础用法

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

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

禁用状态

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

    加载状态

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

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

    自定义颜色

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

    1. <van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />

    自定义按钮

    通过 node 插槽自定义按钮的内容。

    1. <van-switch v-model="checked">
    2.   <template #node>
    3.     <div class="icon-wrapper">
    4.       <van-icon :name="checked ? 'success' : 'cross'" />
    5.     </div>
    6.   </template>
    7. </van-switch>
    10.   .icon-wrapper {
    11.     display: flex;
    12.     width: 100%;
    13.     justify-content: center;
    14.     font-size: 18px;
    15.   }
    17.   .icon-wrapper .van-icon-success {
    18.     line-height: 32px;
    19.     color: var(--van-blue);
    20.   }
    22.   .icon-wrapper .van-icon-cross {
    23.     line-height: 32px;
    24.     color: var(--van-gray-5);
    25.   }

    异步控制

    1. import { ref } from 'vue';
    2. import { Dialog } from 'vant';
    4. export default {
    5.   setup() {
    6.     const checked = ref(true);
    7.     const onUpdateValue = (newValue) => {
    8.       Dialog.confirm({
    10.         message: '是否切换开关？',
    11.       }).then(() => {
    12.         checked.value = newValue;
    13.       });
    14.     };
    16.     return {
    17.       checked,
    18.       onUpdateValue,
    19.     };
    20.   },
    21. };

    搭配单元格使用

    1. <van-cell center title="标题">
    2.   <template #right-icon>
    3.     <van-switch v-model="checked" size="24" />
    4.   </template>
    5. </van-cell>

    Events

    Slots

    类型定义

    组件导出以下类型定义：

    样式变量

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