diff --git a/src/switch/README.md b/src/switch/README.md
index 2cee7aa52..0bacb763e 100644
--- a/src/switch/README.md
+++ b/src/switch/README.md
@@ -30,47 +30,31 @@ export default {
### Disabled
```html
-
+
```
### Loading
```html
-
+
```
### Custom Size
```html
-
+
```
### Custom Color
```html
-
+
```
### Async Control
```html
-
+
```
```js
@@ -111,6 +95,7 @@ export default {
### Events
-| Event | Description | Parameters |
-|------|------|------|
-| change | Triggered when check status changed | checked: is switch checked |
+| Event | Description | Parameters | Version |
+|------|------|------|------|
+| change | Triggered when check status changed | checked: is switch checked | - |
+| click | Triggered when clicked | event: Event | 2.2.11 |
diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md
index 25ea3aa7a..13460c7e7 100644
--- a/src/switch/README.zh-CN.md
+++ b/src/switch/README.zh-CN.md
@@ -13,6 +13,8 @@ Vue.use(Switch);
### 基础用法
+通过`v-model`绑定开关的选中状态,`true`表示开,`false`表示关
+
```html
```
@@ -29,48 +31,42 @@ export default {
### 禁用状态
+通过`disabled`属性来禁用开关,禁用状态下开关不可点击
+
```html
-
+
```
### 加载状态
+通过`loading`属性设置开关为加载状态,加载状态下开关不可点击
+
```html
-
+
```
### 自定义大小
+通过`size`属性自定义开关的大小
+
```html
-
+
```
### 自定义颜色
+`active-color`属性表示打开时的背景色,`inactive-color`表示关闭时的背景色
+
```html
-
+
```
### 异步控制
+需要异步控制开关时,可以使用`value`属性和`input`事件代替`v-model`,并在`input`事件回调函数中手动处理开关状态
+
```html
-
+
```
```js
@@ -111,6 +107,7 @@ export default {
### Events
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| change | 开关状态切换回调 | checked: 是否选中开关 |
+| 事件名 | 说明 | 回调参数 | 版本 |
+|------|------|------|------|
+| change | 开关状态切换回调 | checked: 是否选中开关 | - |
+| click | 点击时触发 | event: Event | 2.2.11 |
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index 0f115ace9..81bab7f5f 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -5,39 +5,23 @@
-
+
-
+
-
+
-
+
-
+
@@ -72,19 +56,21 @@ export default {
methods: {
onInput(checked) {
- this.$dialog.confirm({
- title: this.$t('title'),
- message: this.$t('message')
- }).then(() => {
- this.checked4 = checked;
- });
+ this.$dialog
+ .confirm({
+ title: this.$t('title'),
+ message: this.$t('message')
+ })
+ .then(() => {
+ this.checked4 = checked;
+ });
}
}
};