\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

import { createApp } from 'vue';
import { Switch } from 'vant';

const app = createApp();
app.use(Switch);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7 v-model \u7ED1\u5B9A\u5F00\u5173\u7684\u9009\u4E2D\u72B6\u6001\uFF0Ctrue \u8868\u793A\u5F00\uFF0Cfalse \u8868\u793A\u5173\u3002

<van-switch v-model="checked" />

import { ref } from 'vue';

export default {
  setup() {
    const checked = ref(true);
    return { checked };
  },
};

\u7981\u7528\u72B6\u6001

\u901A\u8FC7 disabled \u5C5E\u6027\u6765\u7981\u7528\u5F00\u5173\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u5F00\u5173\u4E0D\u53EF\u70B9\u51FB\u3002

<van-switch v-model="checked" disabled />

\u52A0\u8F7D\u72B6\u6001

\u901A\u8FC7 loading \u5C5E\u6027\u8BBE\u7F6E\u5F00\u5173\u4E3A\u52A0\u8F7D\u72B6\u6001\uFF0C\u52A0\u8F7D\u72B6\u6001\u4E0B\u5F00\u5173\u4E0D\u53EF\u70B9\u51FB\u3002

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

\u81EA\u5B9A\u4E49\u5927\u5C0F

\u901A\u8FC7 size \u5C5E\u6027\u81EA\u5B9A\u4E49\u5F00\u5173\u7684\u5927\u5C0F\u3002

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

\u81EA\u5B9A\u4E49\u989C\u8272

active-color \u5C5E\u6027\u8868\u793A\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272\uFF0Cinactive-color \u8868\u793A\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272\u3002

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

\u81EA\u5B9A\u4E49\u6309\u94AE

\u901A\u8FC7 node \u63D2\u69FD\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u5185\u5BB9\u3002

<van-switch v-model="checked">
  <template #node>
    <div class="icon-wrapper">
      <van-icon :name="checked ? 'success' : 'cross'" />
    </div>
  </template>
</van-switch>

<style>
  .icon-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 18px;
  }

  .icon-wrapper .van-icon-success {
    line-height: 32px;
    color: var(--van-blue);
  }

  .icon-wrapper .van-icon-cross {
    line-height: 32px;
    color: var(--van-gray-5);
  }
</style>

\u5F02\u6B65\u63A7\u5236

\u9700\u8981\u5F02\u6B65\u63A7\u5236\u5F00\u5173\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528 modelValue \u5C5E\u6027\u548C update:model-value \u4E8B\u4EF6\u4EE3\u66FF v-model\uFF0C\u5E76\u5728\u4E8B\u4EF6\u56DE\u8C03\u51FD\u6570\u4E2D\u624B\u52A8\u5904\u7406\u5F00\u5173\u72B6\u6001\u3002

<van-switch :model-value="checked" @update:model-value="onUpdateValue" />

import { ref } from 'vue';
import { Dialog } from 'vant';

export default {
  setup() {
    const checked = ref(true);
    const onUpdateValue = (newValue) => {
      Dialog.confirm({
        title: '\u63D0\u9192',
        message: '\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F',
      }).then(() => {
        checked.value = newValue;
      });
    };

    return {
      checked,
      onUpdateValue,
    };
  },
};

\u642D\u914D\u5355\u5143\u683C\u4F7F\u7528

<van-cell center title="\u6807\u9898">
  <template #right-icon>
    <van-switch v-model="checked" size="24" />
  </template>
</van-cell>

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u5F00\u5173\u9009\u4E2D\u72B6\u6001	any	`false`
loading	\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001	boolean	`false`
disabled	\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001	boolean	`false`
size	\u5F00\u5173\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A `px`	number \| string	`30px`
active-color	\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272	string	`#1989fa`
inactive-color	\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272	string	`white`
active-value	\u6253\u5F00\u65F6\u5BF9\u5E94\u7684\u503C	any	`true`
inactive-value	\u5173\u95ED\u65F6\u5BF9\u5E94\u7684\u503C	any	`false`

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u5F00\u5173\u72B6\u6001\u5207\u6362\u65F6\u89E6\u53D1	value: any
click	\u70B9\u51FB\u65F6\u89E6\u53D1	event: MouseEvent

Slots

\u540D\u79F0	\u8BF4\u660E	\u53C2\u6570
node `v3.5.0`	\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u5185\u5BB9	-
background `v3.5.0`	\u81EA\u5B9A\u4E49\u5F00\u5173\u7684\u80CC\u666F\u5185\u5BB9	-

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type { SwitchProps } from 'vant';

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0	\u9ED8\u8BA4\u503C	\u63CF\u8FF0
--van-switch-size	30px	-
--van-switch-width	2em	-
--van-switch-height	1em	-
--van-switch-node-size	1em	-
--van-switch-node-background-color	var(--van-white)	-
--van-switch-node-box-shadow	0 3px 1px 0 rgba(0, 0, 0, 0.05)	-
--van-switch-background-color	var(--van-background-color-light)	-
--van-switch-on-background-color	var(--van-primary-color)	-
--van-switch-transition-duration	var(--van-animation-duration-base)	-
--van-switch-disabled-opacity	var(--van-disabled-opacity)	-
--van-switch-border	var(--van-border-width-base) solid rgba(0, 0, 0, 0.1)	-

Switch \u5F00\u5173

\u4ECB\u7ECD