diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
index 61cc2f7e0..ee5f0f5ce 100644
--- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
- <div title="设为默认收货地址" class="van-switch" style="font-size:26px;">
+ <div title="设为默认收货地址" class="van-switch" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index 239de8ae8..eacaf69da 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -203,7 +203,7 @@ exports[`create a AddressEdit with props 1`] = `
<!---->
</div>
<div class="van-cell__value">
- <div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;">
+ <div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
diff --git a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
index 6c003620b..c0c42dba4 100644
--- a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
- <div title="标题" class="van-switch van-switch--on" style="font-size:26px;">
+ <div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
- <div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:26px;">
+ <div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
@@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
- <div title="标题" class="van-switch van-switch--on" style="font-size:26px;">
+ <div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
diff --git a/packages/switch/demo/index.vue b/packages/switch/demo/index.vue
index f3ca7e351..5fcee272e 100644
--- a/packages/switch/demo/index.vue
+++ b/packages/switch/demo/index.vue
@@ -13,7 +13,13 @@
</demo-block>
<demo-block :title="$t('advancedUsage')">
- <van-switch :value="checked2" size="36px" @input="onInput" />
+ <van-switch
+ :value="checked2"
+ size="36px"
+ active-color="#4b0"
+ inactive-color="#f44"
+ @input="onInput"
+ />
</demo-block>
</demo-section>
</template>
diff --git a/packages/switch/en-US.md b/packages/switch/en-US.md
index f7c54e1da..07742bf9f 100644
--- a/packages/switch/en-US.md
+++ b/packages/switch/en-US.md
@@ -41,7 +41,13 @@ export default {
#### Advanced usage
```html
-<van-switch :value="checked" size="36px" @input="onInput" />
+<van-switch
+ :value="checked"
+ size="36px"
+ active-color="#4b0"
+ inactive-color="#f44"
+ @input="onInput"
+/>
```
```js
@@ -73,6 +79,8 @@ export default {
| loading | Whether to show loading icon | `Boolean` | `false` |
| disabled | Whether to disable switch | `Boolean` | `false` |
| size | Size of switch | `String` | `30px` |
+| active-color | Background color when active | `String` | `#1989fa` |
+| inactive-color | Background color when inactive | `String` | `#fff` |
### Event
diff --git a/packages/switch/index.vue b/packages/switch/index.vue
index 32e705a00..b79d9e780 100644
--- a/packages/switch/index.vue
+++ b/packages/switch/index.vue
@@ -23,6 +23,8 @@ export default create({
value: Boolean,
loading: Boolean,
disabled: Boolean,
+ activeColor: String,
+ inactiveColor: String,
size: {
type: String,
default: '30px'
@@ -32,7 +34,8 @@ export default create({
computed: {
style() {
return {
- fontSize: this.size
+ fontSize: this.size,
+ backgroundColor: this.value ? this.activeColor : this.inactiveColor
};
}
},
diff --git a/packages/switch/test/__snapshots__/demo.spec.js.snap b/packages/switch/test/__snapshots__/demo.spec.js.snap
index 38c8843d8..44196c044 100644
--- a/packages/switch/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch/test/__snapshots__/demo.spec.js.snap
@@ -3,28 +3,28 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
- <div class="van-switch van-switch--on" style="font-size:30px;">
+ <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
</div>
</div>
<div>
- <div class="van-switch van-switch--on van-switch--disabled" style="font-size:30px;">
+ <div class="van-switch van-switch--on van-switch--disabled" style="font-size:30px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
</div>
</div>
<div>
- <div class="van-switch van-switch--on" style="font-size:30px;">
+ <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
<div class="van-switch__node">
<div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
</div>
</div>
<div>
- <div class="van-switch van-switch--on" style="font-size:36px;">
+ <div class="van-switch van-switch--on" style="font-size:36px;background-color:#4b0;">
<div class="van-switch__node">
<!---->
</div>
diff --git a/packages/switch/zh-CN.md b/packages/switch/zh-CN.md
index f0e272f36..2d4e13283 100644
--- a/packages/switch/zh-CN.md
+++ b/packages/switch/zh-CN.md
@@ -36,7 +36,13 @@ export default {
#### 高级用法
```html
-<van-switch :value="checked" size="36px" @input="onInput" />
+<van-switch
+ :value="checked"
+ size="36px"
+ active-color="#4b0"
+ inactive-color="#f44"
+ @input="onInput"
+/>
```
```js
@@ -69,6 +75,8 @@ export default {
| loading | 是否为加载状态 | `Boolean` | `false` | - |
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
| size | 开关尺寸 | `String` | `30px` | 1.0.0 |
+| active-color | 打开时的背景色 | `String` | `#1989fa` | 1.3.11 |
+| inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.3.11 |
### Event
diff --git a/packages/vant-css/src/switch.css b/packages/vant-css/src/switch.css
index 5afdf960f..0a1985896 100644
--- a/packages/vant-css/src/switch.css
+++ b/packages/vant-css/src/switch.css
@@ -2,13 +2,14 @@
.van-switch {
height: 1em;
- width: 1.6em;
+ width: 1.8em;
display: inline-block;
position: relative;
- background: $white;
+ border-radius: 1em;
box-sizing: content-box;
border: 1px solid rgba(0, 0, 0, .1);
- border-radius: 1em;
+ background-color: $white;
+ transition: background-color .3s;
&__node {
top: 0;
@@ -34,7 +35,7 @@
background-color: $blue;
.van-switch__node {
- transform: translateX(.6em);
+ transform: translateX(.8em);
}
}