diff --git a/packages/vant/src/switch/README.md b/packages/vant/src/switch/README.md
index 891f235f5..b4ade437a 100644
--- a/packages/vant/src/switch/README.md
+++ b/packages/vant/src/switch/README.md
@@ -59,6 +59,37 @@ export default {
```
+### Custom Node
+
+Using `node` slot to custom the content of the node.
+
+```html
+
+
+
+
+
+
+
+```
+
### Async Control
```html
@@ -121,6 +152,12 @@ export default {
| change | Emitted when check status changed | _value: any_ |
| click | Emitted when component is clicked | _event: MouseEvent_ |
+### Slots
+
+| Name | Description | SlotProps |
+| ------------- | -------------------------- | --------- |
+| node `v3.5.0` | Custom the content of node | - |
+
### Types
The component exports the following type definitions:
diff --git a/packages/vant/src/switch/README.zh-CN.md b/packages/vant/src/switch/README.zh-CN.md
index 1060bde00..371c5653e 100644
--- a/packages/vant/src/switch/README.zh-CN.md
+++ b/packages/vant/src/switch/README.zh-CN.md
@@ -69,6 +69,37 @@ export default {
```
+### 自定义按钮
+
+通过 `node` 插槽自定义按钮的内容。
+
+```html
+
+
+
+
+
+
+
+```
+
### 异步控制
需要异步控制开关时,可以使用 `modelValue` 属性和 `update:model-value` 事件代替 `v-model`,并在事件回调函数中手动处理开关状态。
@@ -133,6 +164,12 @@ export default {
| change | 开关状态切换时触发 | _value: any_ |
| click | 点击时触发 | _event: MouseEvent_ |
+### Slots
+
+| 名称 | 说明 | 参数 |
+| ------------- | ---------------- | ---- |
+| node `v3.5.0` | 自定义按钮的内容 | - |
+
### 类型定义
组件导出以下类型定义:
diff --git a/packages/vant/src/switch/Switch.tsx b/packages/vant/src/switch/Switch.tsx
index bfc337f80..73f18c997 100644
--- a/packages/vant/src/switch/Switch.tsx
+++ b/packages/vant/src/switch/Switch.tsx
@@ -31,7 +31,7 @@ export default defineComponent({
emits: ['change', 'update:modelValue'],
- setup(props, { emit }) {
+ setup(props, { emit, slots }) {
const isChecked = () => props.modelValue === props.activeValue;
const onClick = () => {
@@ -47,6 +47,9 @@ export default defineComponent({
const color = isChecked() ? props.activeColor : props.inactiveColor;
return ;
}
+ if (slots.node) {
+ return slots.node();
+ }
};
useCustomFieldValue(() => props.modelValue);
diff --git a/packages/vant/src/switch/demo/index.vue b/packages/vant/src/switch/demo/index.vue
index d25649edc..9786a5e43 100644
--- a/packages/vant/src/switch/demo/index.vue
+++ b/packages/vant/src/switch/demo/index.vue
@@ -1,6 +1,7 @@