From 586bc21dd311ac81c59e3c167a27e54c6dd1b4f5 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 4 Jun 2022 20:29:28 +0800
Subject: [PATCH] feat(Switch): add background slot (#10666)

* feat(Switch): add background slot

* chore: revert lock file

* chore: new line
---
 packages/vant/src/switch/README.md            |  7 ++---
 packages/vant/src/switch/README.zh-CN.md      | 27 ++++++++++---------
 packages/vant/src/switch/Switch.tsx           |  1 +
 .../test/__snapshots__/index.spec.ts.snap     | 24 +++++++++++++++++
 packages/vant/src/switch/test/index.spec.ts   | 20 ++++++++++++++
 5 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/packages/vant/src/switch/README.md b/packages/vant/src/switch/README.md
index b4ade437a..dadde0149 100644
--- a/packages/vant/src/switch/README.md
+++ b/packages/vant/src/switch/README.md
@@ -154,9 +154,10 @@ export default {
 
 ### Slots
 
-| Name          | Description                | SlotProps |
-| ------------- | -------------------------- | --------- |
-| node `v3.5.0` | Custom the content of node | -         |
+| Name                | Description                     | SlotProps |
+| ------------------- | ------------------------------- | --------- |
+| node `v3.5.0`       | Custom the content of node      | -         |
+| background `v3.5.0` | Custom the background of switch | -         |
 
 ### Types
 
diff --git a/packages/vant/src/switch/README.zh-CN.md b/packages/vant/src/switch/README.zh-CN.md
index 371c5653e..9ffd1297e 100644
--- a/packages/vant/src/switch/README.zh-CN.md
+++ b/packages/vant/src/switch/README.zh-CN.md
@@ -146,16 +146,16 @@ export default {
 
 ### Props
 
-| 参数           | 说明                     | 类型               | 默认值    |
-| -------------- | ------------------------ | ------------------ | --------- |
-| v-model        | 开关选中状态             | _any_              | `false`   |
-| loading        | 是否为加载状态           | _boolean_          | `false`   |
-| disabled       | 是否为禁用状态           | _boolean_          | `false`   |
-| size           | 开关尺寸，默认单位为`px` | _number \| string_ | `30px`    |
-| active-color   | 打开时的背景色           | _string_           | `#1989fa` |
-| inactive-color | 关闭时的背景色           | _string_           | `white`   |
-| active-value   | 打开时对应的值           | _any_              | `true`    |
-| inactive-value | 关闭时对应的值           | _any_              | `false`   |
+| 参数           | 说明                      | 类型               | 默认值    |
+| -------------- | ------------------------- | ------------------ | --------- |
+| v-model        | 开关选中状态              | _any_              | `false`   |
+| loading        | 是否为加载状态            | _boolean_          | `false`   |
+| disabled       | 是否为禁用状态            | _boolean_          | `false`   |
+| size           | 开关尺寸，默认单位为 `px` | _number \| string_ | `30px`    |
+| active-color   | 打开时的背景色            | _string_           | `#1989fa` |
+| inactive-color | 关闭时的背景色            | _string_           | `white`   |
+| active-value   | 打开时对应的值            | _any_              | `true`    |
+| inactive-value | 关闭时对应的值            | _any_              | `false`   |
 
 ### Events
 
@@ -166,9 +166,10 @@ export default {
 
 ### Slots
 
-| 名称          | 说明             | 参数 |
-| ------------- | ---------------- | ---- |
-| node `v3.5.0` | 自定义按钮的内容 | -    |
+| 名称                | 说明                 | 参数 |
+| ------------------- | -------------------- | ---- |
+| node `v3.5.0`       | 自定义按钮的内容     | -    |
+| background `v3.5.0` | 自定义开关的背景内容 | -    |
 
 ### 类型定义
 
diff --git a/packages/vant/src/switch/Switch.tsx b/packages/vant/src/switch/Switch.tsx
index 73f18c997..830552e54 100644
--- a/packages/vant/src/switch/Switch.tsx
+++ b/packages/vant/src/switch/Switch.tsx
@@ -76,6 +76,7 @@ export default defineComponent({
           onClick={onClick}
         >
           <div class={bem('node')}>{renderLoading()}</div>
+          {slots.background?.()}
         </div>
       );
     };
diff --git a/packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap
index c965d285a..8533e5f54 100644
--- a/packages/vant/src/switch/test/__snapshots__/index.spec.ts.snap
+++ b/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>
+`;
diff --git a/packages/vant/src/switch/test/index.spec.ts b/packages/vant/src/switch/test/index.spec.ts
index df3e97e92..b920f0c0c 100644
--- a/packages/vant/src/switch/test/index.spec.ts
+++ b/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();
+});