feat(Switch): add background slot (#10666)

* feat(Switch): add background slot

* chore: revert lock file

* chore: new line

packages/vant/src/switch/README.md

@@ -155,8 +155,9 @@ export default {
 ### Slots
 
 | Name                | Description                     | SlotProps |
-| ------------- | -------------------------- | --------- |
+| ------------------- | ------------------------------- | --------- |
 | node `v3.5.0`       | Custom the content of node      | -         |
+| background `v3.5.0` | Custom the background of switch | -         |
 
 ### Types
 

packages/vant/src/switch/README.zh-CN.md

@@ -147,7 +147,7 @@ export default {
 ### Props
 
 | 参数           | 说明                      | 类型               | 默认值    |
-| -------------- | ------------------------ | ------------------ | --------- |
+| -------------- | ------------------------- | ------------------ | --------- |
 | v-model        | 开关选中状态              | _any_              | `false`   |
 | loading        | 是否为加载状态            | _boolean_          | `false`   |
 | disabled       | 是否为禁用状态            | _boolean_          | `false`   |
@@ -167,8 +167,9 @@ export default {
 ### Slots
 
 | 名称                | 说明                 | 参数 |
-| ------------- | ---------------- | ---- |
+| ------------------- | -------------------- | ---- |
 | node `v3.5.0`       | 自定义按钮的内容     | -    |
+| background `v3.5.0` | 自定义开关的背景内容 | -    |
 
 ### 类型定义
 

packages/vant/src/switch/Switch.tsx

@@ -76,6 +76,7 @@ export default defineComponent({
           onClick={onClick}
         >
           <div class={bem('node')}>{renderLoading()}</div>
+          {slots.background?.()}
         </div>
       );
     };

packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap

@@ -43,3 +43,27 @@ exports[`should apply inactive color to loading icon 1`] = `
   </span>
 </div>
 `;
+
+exports[`should render background slot correctly 1`] = `
+<div role="switch"
+     class="van-switch"
+     tabindex="0"
+     aria-checked="false"
+>
+  <div class="van-switch__node">
+  </div>
+  Custom background
+</div>
+`;
+
+exports[`should render node slot correctly 1`] = `
+<div role="switch"
+     class="van-switch"
+     tabindex="0"
+     aria-checked="false"
+>
+  <div class="van-switch__node">
+    Custom node
+  </div>
+</div>
+`;

packages/vant/src/switch/test/index.spec.ts

@@ -109,3 +109,23 @@ test('should allow to custom active-value and inactive-value', () => {
   wrapper.trigger('click');
   expect(wrapper.emitted('update:modelValue')![0]).toEqual(['off']);
 });
+
+test('should render node slot correctly', () => {
+  const wrapper = mount(Switch, {
+    slots: {
+      node: () => 'Custom node',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render background slot correctly', () => {
+  const wrapper = mount(Switch, {
+    slots: {
+      background: () => 'Custom background',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});