[new feature] Sidebar: support use v-model to bind active key (#3698)

src/sidebar/demo/index.vue

@@ -1,10 +1,7 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-sidebar
-        :active-key="activeKey1"
-        @change="onChange('activeKey1', $event)"
-      >
+      <van-sidebar v-model="activeKey1">
         <van-sidebar-item :title="$t('title')" />
         <van-sidebar-item :title="$t('title')" />
         <van-sidebar-item :title="$t('title')" />
@@ -12,10 +9,7 @@
     </demo-block>
 
     <demo-block :title="$t('showBadge')">
-      <van-sidebar
-        :active-key="activeKey2"
-        @change="onChange('activeKey2', $event)"
-      >
+      <van-sidebar v-model="activeKey2">
         <van-sidebar-item
           :title="$t('title')"
           info="8"
@@ -50,12 +44,6 @@ export default {
       activeKey1: 0,
       activeKey2: 0
     };
-  },
-
-  methods: {
-    onChange(name, key) {
-      this[name] = key;
-    }
   }
 };
 </script>
@@ -64,20 +52,10 @@ export default {
 @import '../../style/var';
 
 .demo-sidebar {
+  background-color: @white;
+
   .van-sidebar {
-    width: auto;
-    margin: 0 15px;
-    padding: 20px 0;
-    background-color: @white;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  .van-sidebar-item {
-    width: 85px;
-    margin: 0 auto;
+    margin-left: 15px;
   }
 }
 </style>