diff --git a/src/sidebar/README.md b/src/sidebar/README.md
index 1fff91773..bd8d6da67 100644
--- a/src/sidebar/README.md
+++ b/src/sidebar/README.md
@@ -52,6 +52,31 @@ export default {
```
+### Change Event
+
+```html
+
+
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ activeKey: 0
+ };
+ },
+ methods: {
+ onChange(index) {
+ Notify({ type: 'primary', message: index });
+ }
+ }
+}
+```
+
## API
### Sidebar Props
diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md
index 60cad4f07..4babe7765 100644
--- a/src/sidebar/README.zh-CN.md
+++ b/src/sidebar/README.zh-CN.md
@@ -58,6 +58,34 @@ export default {
```
+
+### Change 事件
+
+设置`change`方法来监听切换导航项时的事件
+
+```html
+
+
+
+
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ activeKey: 0
+ };
+ },
+ methods: {
+ onChange(index) {
+ Notify({ type: 'primary', message: index });
+ }
+ }
+}
+```
+
## API
### Sidebar Props
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index e69e78ed6..6e7abfa02 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -27,6 +27,15 @@
+
+
+
+
+
+
+
+
+
@@ -37,11 +46,15 @@ export default {
'zh-CN': {
title: '标签名',
showInfo: '提示信息',
- disabled: '禁用选项'
+ disabled: '禁用选项',
+ eventChange: '切换事件',
+ selectTip: '你切换到了'
},
'en-US': {
showInfo: 'Show Info',
- disabled: 'Disabled'
+ disabled: 'Disabled',
+ eventChange: 'Change Event',
+ selectTip: 'You select '
}
},
@@ -49,8 +62,18 @@ export default {
return {
activeKey1: 0,
activeKey2: 0,
- activeKey3: 0
+ activeKey3: 0,
+ activeKey4: 0
};
+ },
+
+ methods: {
+ onChange(index) {
+ this.$notify({
+ type: 'primary',
+ message: `${this.$t('selectTip')} ${this.$t('title')}${index + 1}`
+ });
+ }
}
};
diff --git a/src/sidebar/test/__snapshots__/demo.spec.js.snap b/src/sidebar/test/__snapshots__/demo.spec.js.snap
index e2a143cc2..25f914d4f 100644
--- a/src/sidebar/test/__snapshots__/demo.spec.js.snap
+++ b/src/sidebar/test/__snapshots__/demo.spec.js.snap
@@ -54,6 +54,24 @@ exports[`renders demo correctly 1`] = `
+
`;