/*! For license information please see 8724.33adf146.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["8724"],{35213:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Switch \u5F00\u5173

\n

\u4ECB\u7ECD

\n

\u7528\u4E8E\u5728\u6253\u5F00\u548C\u5173\u95ED\u72B6\u6001\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002

\n

\u5F15\u5165

\n

\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

\n
import { createApp } from 'vue';\nimport { Switch } from 'vant';\n\nconst app = createApp();\napp.use(Switch);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

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

\n
<van-switch v-model="checked" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref(true);\n    return { checked };\n  },\n};\n
\n

\u7981\u7528\u72B6\u6001

\n

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

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

\u52A0\u8F7D\u72B6\u6001

\n

\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

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

\u81EA\u5B9A\u4E49\u5927\u5C0F

\n

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

\n
<van-switch v-model="checked" size="22px" />\n
\n

\u81EA\u5B9A\u4E49\u989C\u8272

\n

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

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

\u81EA\u5B9A\u4E49\u6309\u94AE

\n

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

\n
<van-switch v-model="checked">\n  <template #node>\n    <div class="icon-wrapper">\n      <van-icon :name="checked ? 'success' : 'cross'" />\n    </div>\n  </template>\n</van-switch>\n\n<style>\n  .icon-wrapper {\n    display: flex;\n    width: 100%;\n    justify-content: center;\n    font-size: 18px;\n  }\n\n  .icon-wrapper .van-icon-success {\n    line-height: 32px;\n    color: var(--van-blue);\n  }\n\n  .icon-wrapper .van-icon-cross {\n    line-height: 32px;\n    color: var(--van-gray-5);\n  }\n</style>\n
\n

\u5F02\u6B65\u63A7\u5236

\n

\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

\n
<van-switch :model-value="checked" @update:model-value="onUpdateValue" />\n
\n
import { ref } from 'vue';\nimport { showConfirmDialog } from 'vant';\n\nexport default {\n  setup() {\n    const checked = ref(true);\n    const onUpdateValue = (newValue) => {\n      showConfirmDialog({\n        title: '\u63D0\u9192',\n        message: '\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F',\n      }).then(() => {\n        checked.value = newValue;\n      });\n    };\n\n    return {\n      checked,\n      onUpdateValue,\n    };\n  },\n};\n
\n

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

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

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u5F00\u5173\u9009\u4E2D\u72B6\u6001anyfalse
loading\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001booleanfalse
disabled\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001booleanfalse
size\u5F00\u5173\u6309\u94AE\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | string26px
active-color\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272string#1989fa
inactive-color\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272stringrgba(120, 120, 128, 0.16)
active-value\u6253\u5F00\u65F6\u5BF9\u5E94\u7684\u503Canytrue
inactive-value\u5173\u95ED\u65F6\u5BF9\u5E94\u7684\u503Canyfalse
\n

Events

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

Slots

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

\u7C7B\u578B\u5B9A\u4E49

\n

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

\n
import type { SwitchProps } from 'vant';\n
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-switch-size26px-
--van-switch-widthcalc(1.8em + 4px)-
--van-switch-heightcalc(1em + 4px)-
--van-switch-node-size1em-
--van-switch-node-backgroundvar(--van-white)-
--van-switch-node-shadow0 3px 1px 0 rgba(0, 0, 0, 0.05)-
--van-switch-backgroundrgba(120, 120, 128, 0.16)-
--van-switch-on-backgroundvar(--van-primary-color)-
--van-switch-durationvar(--van-duration-base)-
--van-switch-disabled-opacityvar(--van-disabled-opacity)-
\n
'},null,8,l))}}}]);