Used to switch between open and closed states.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Switch } from 'vant';\n\nconst app = createApp();\napp.use(Switch);\n<van-switch v-model="checked" />\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const checked = ref(true);\n return { checked };\n },\n};\n<van-switch v-model="checked" disabled />\n<van-switch v-model="checked" loading />\n<van-switch v-model="checked" size="22px" />\n<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />\nUsing node slot to custom the content of the node.
<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<van-switch :model-value="checked" @update:model-value="onUpdateValue" />\nimport { 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: 'Confirm',\n message: 'Are you sure to toggle switch?',\n }).then(() => {\n checked.value = newValue;\n });\n };\n\n return {\n checked,\n onUpdateValue,\n };\n },\n};\n<van-cell center title="Title">\n <template #right-icon>\n <van-switch v-model="checked" />\n </template>\n</van-cell>\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| v-model | \nCheck status of Switch | \nActiveValue | InactiveValue | \nfalse | \n
| loading | \nWhether to show loading icon | \nboolean | \nfalse | \n
| disabled | \nWhether to disable switch | \nboolean | \nfalse | \n
| size | \nSize of switch button | \nnumber | string | \n26px | \n
| active-color | \nBackground color when active | \nstring | \n#1989fa | \n
| inactive-color | \nBackground color when inactive | \nstring | \nrgba(120, 120, 128, 0.16) | \n
| active-value | \nValue when active | \nany | \ntrue | \n
| inactive-value | \nValue when inactive | \nany | \nfalse | \n
| Event | \nDescription | \nParameters | \n
|---|---|---|
| change | \nEmitted when check status changed | \nvalue: any | \n
| click | \nEmitted when component is clicked | \nevent: MouseEvent | \n
| Name | \nDescription | \nSlotProps | \n
|---|---|---|
| node | \nCustom the content of node | \n- | \n
| background | \nCustom the background of switch | \n- | \n
The component exports the following type definitions:
\nimport type { SwitchProps } from 'vant';\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-switch-size | \n26px | \n- | \n
| --van-switch-width | \ncalc(1.8em + 4px) | \n- | \n
| --van-switch-height | \ncalc(1em + 4px) | \n- | \n
| --van-switch-node-size | \n1em | \n- | \n
| --van-switch-node-background | \nvar(--van-white) | \n- | \n
| --van-switch-node-shadow | \n0 3px 1px 0 rgba(0, 0, 0, 0.05) | \n- | \n
| --van-switch-background | \nrgba(120, 120, 128, 0.16) | \n- | \n
| --van-switch-on-background | \nvar(--van-primary-color) | \n- | \n
| --van-switch-duration | \nvar(--van-duration-base) | \n- | \n
| --van-switch-disabled-opacity | \nvar(--van-disabled-opacity) | \n- | \n