[Doc] Sidebar: update demo (#3695)

src/sidebar/README.zh-CN.md

@@ -18,9 +18,8 @@ Vue.use(SidebarItem);
 ```html
 <van-sidebar :active-key="activeKey" @change="onChange">
   <van-sidebar-item title="标签名称" />
-  <van-sidebar-item title="标签名称" info="8" />
-  <van-sidebar-item title="标签名称" info="99" />
-  <van-sidebar-item title="标签名称" info="99+" />
+  <van-sidebar-item title="标签名称" />
+  <van-sidebar-item title="标签名称" />
 </van-sidebar>
 ```
 
@@ -40,6 +39,18 @@ export default {
 };
 ```
 
+### 显示徽标
+
+通过`info`属性设置徽标内容
+
+```html
+<van-sidebar :active-key="activeKey" @change="onChange">
+  <van-sidebar-item title="标签名称" info="8" />
+  <van-sidebar-item title="标签名称" info="99" />
+  <van-sidebar-item title="标签名称" info="99+" />
+</van-sidebar>
+```
+
 ## API
 
 ### Sidebar Props

src/sidebar/demo/index.vue

@@ -2,10 +2,20 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-sidebar
-        :active-key="activeKey"
-        @change="onChange"
+        :active-key="activeKey1"
+        @change="onChange('activeKey1', $event)"
       >
         <van-sidebar-item :title="$t('title')" />
+        <van-sidebar-item :title="$t('title')" />
+        <van-sidebar-item :title="$t('title')" />
+      </van-sidebar>
+    </demo-block>
+
+    <demo-block :title="$t('showBadge')">
+      <van-sidebar
+        :active-key="activeKey2"
+        @change="onChange('activeKey2', $event)"
+      >
         <van-sidebar-item
           :title="$t('title')"
           info="8"
@@ -27,19 +37,24 @@
 export default {
   i18n: {
     'zh-CN': {
-      title: '标签名称'
+      title: '标签名称',
+      showBadge: '显示徽标'
+    },
+    'en-US': {
+      showBadge: 'Show Badge'
     }
   },
 
   data() {
     return {
-      activeKey: 0
+      activeKey1: 0,
+      activeKey2: 0
     };
   },
 
   methods: {
-    onChange(key) {
-      this.activeKey = key;
+    onChange(name, key) {
+      this[name] = key;
     }
   }
 };

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

@@ -8,6 +8,17 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
       </a> <a class="van-sidebar-item van-hairline">
+        <div class="van-sidebar-item__text">标签名称
+          <!---->
+        </div>
+      </a> <a class="van-sidebar-item van-hairline">
+        <div class="van-sidebar-item__text">标签名称
+          <!---->
+        </div>
+      </a></div>
+  </div>
+  <div>
+    <div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
         <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div>
         </div>
       </a> <a class="van-sidebar-item van-hairline">