docs(Sidebar): add change event demo (#5172)

src/sidebar/README.md

@@ -52,6 +52,31 @@ export default {
 </van-sidebar>
 ```
 
+### Change Event
+
+```html
+<van-sidebar v-model="activeKey" @change="onChange">
+  <van-sidebar-item title="Title1" />
+  <van-sidebar-item title="Title2" />
+  <van-sidebar-item title="Title3" />
+</van-sidebar>
+```
+
+```js
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+  methods: {
+    onChange(index) {
+      Notify({ type: 'primary', message: index });
+    }
+  }
+}
+```
+
 ## API
 
 ### Sidebar Props

src/sidebar/README.zh-CN.md

@@ -58,6 +58,34 @@ export default {
 </van-sidebar>
 ```
 
+
+### Change 事件
+
+设置`change`方法来监听切换导航项时的事件
+
+```html
+<van-sidebar v-model="activeKey" @change="onChange">
+  <van-sidebar-item title="标签名1" />
+  <van-sidebar-item title="标签名2" />
+  <van-sidebar-item title="标签名3" />
+</van-sidebar>
+```
+
+```js
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+  methods: {
+    onChange(index) {
+      Notify({ type: 'primary', message: index });
+    }
+  }
+}
+```
+
 ## API
 
 ### Sidebar Props

src/sidebar/demo/index.vue

@@ -27,6 +27,15 @@
           <van-sidebar-item :title="$t('title')" />
         </van-sidebar>
       </van-grid-item>
+
+      <van-grid-item>
+        <h3 class="demo-sidebar-title">{{ $t('eventChange') }}</h3>
+        <van-sidebar v-model="activeKey4" @change="onChange">
+          <van-sidebar-item :title="$t('title') + 1" />
+          <van-sidebar-item :title="$t('title') + 2" />
+          <van-sidebar-item :title="$t('title') + 3" />
+        </van-sidebar>
+      </van-grid-item>
     </van-grid>
   </demo-section>
 </template>
@@ -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}`
+      });
+    }
   }
 };
 </script>

src/sidebar/test/__snapshots__/demo.spec.js.snap

@@ -54,6 +54,24 @@ exports[`renders demo correctly 1`] = `
           </a></div>
       </div>
     </div>
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <h3 class="demo-sidebar-title">切换事件</h3>
+        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+            <div class="van-sidebar-item__text">标签名1
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名2
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名3
+              <!---->
+            </div>
+          </a></div>
+      </div>
+    </div>
   </div>
 </div>
 `;