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

src/sidebar-item/index.js

@@ -23,6 +23,7 @@ export default createComponent({
   methods: {
     onClick() {
       this.$emit('click', this.index);
+      this.parent.$emit('input', this.index);
       this.parent.$emit('change', this.index);
       route(this.$router, this);
     }

src/sidebar/README.md

@@ -13,14 +13,11 @@ Vue.use(SidebarItem);
 
 ### Basic Usage
 
-Use `active-key` prop to set index of chosen item
-
 ```html
-<van-sidebar :active-key="activeKey" @change="onChange">
+<van-sidebar v-model="activeKey">
+  <van-sidebar-item title="Title" />
+  <van-sidebar-item title="Title" />
   <van-sidebar-item title="Title" />
-  <van-sidebar-item title="Title" info="8" />
-  <van-sidebar-item title="Title" info="99" />
-  <van-sidebar-item title="Title" info="99+" />
 </van-sidebar>
 ```
 
@@ -30,29 +27,33 @@ export default {
     return {
       activeKey: 0
     };
-  },
-
-  methods: {
-    onChange(key) {
-      this.activeKey = key;
-    }
   }
 };
 ```
 
+### Show Badge
+
+```html
+<van-sidebar v-model="activeKey">
+  <van-sidebar-item title="Title" info="8" />
+  <van-sidebar-item title="Title" info="99" />
+  <van-sidebar-item title="Title" info="99+" />
+</van-sidebar>
+```
+
 ## API
 
 ### Sidebar Props
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
-| active-key | Index of chosen item | `String | Number` | `0` |
+| v-model | Index of chosen item | `String | Number` | `0` |
 
 ### Sidebar Events
 
 | Event | Description | Arguments |
 |------|------|------|
-| change | Triggered when item changed | key: index of current item |
+| change | Triggered when item changed | index: index of current item |
 
 ### SidebarItem Props
 
@@ -66,4 +67,4 @@ export default {
 
 | Event | Description | Arguments |
 |------|------|------|
-| click | Triggered when click item | key: index of current item |
+| click | Triggered when click item | index: index of current item |

src/sidebar/README.zh-CN.md

@@ -13,10 +13,10 @@ Vue.use(SidebarItem);
 
 ### 基础用法
 
-通过在`van-sidebar`上设置`active-key`属性来控制选中项
+通过`v-model`绑定当前选中项的索引
 
 ```html
-<van-sidebar :active-key="activeKey" @change="onChange">
+<van-sidebar v-model="activeKey">
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" />
@@ -29,12 +29,6 @@ export default {
     return {
       activeKey: 0
     };
-  },
-
-  methods: {
-    onChange(key) {
-      this.activeKey = key;
-    }
   }
 };
 ```
@@ -44,7 +38,7 @@ export default {
 通过`info`属性设置徽标内容
 
 ```html
-<van-sidebar :active-key="activeKey" @change="onChange">
+<van-sidebar v-model="activeKey">
   <van-sidebar-item title="标签名称" info="8" />
   <van-sidebar-item title="标签名称" info="99" />
   <van-sidebar-item title="标签名称" info="99+" />
@@ -57,13 +51,13 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| active-key | 当前导航项的索引 | `String | Number` | `0` | - |
+| v-model | 当前导航项的索引 | `String | Number` | `0` | 2.0.4 |
 
 ### Sidebar Events
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| change | 切换当前导航项时触发 | key: 当前导航项的索引 |
+| change | 切换导航项时触发 | index: 当前导航项的索引 |
 
 ### SidebarItem Props
 
@@ -79,4 +73,4 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| click | 点击时触发 | key: 当前导航项的索引 |
+| click | 点击时触发 | index: 当前导航项的索引 |

src/sidebar/demo/index.vue

@@ -1,10 +1,7 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-sidebar
+      <van-sidebar v-model="activeKey1">
-        :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')" />
@@ -12,10 +9,7 @@
     </demo-block>
 
     <demo-block :title="$t('showBadge')">
-      <van-sidebar
+      <van-sidebar v-model="activeKey2">
-        :active-key="activeKey2"
-        @change="onChange('activeKey2', $event)"
-      >
         <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 {
-  .van-sidebar {
-    width: auto;
-    margin: 0 15px;
-    padding: 20px 0;
   background-color: @white;
 
-    &::after {
+  .van-sidebar {
-      display: none;
+    margin-left: 15px;
-    }
-  }
-
-  .van-sidebar-item {
-    width: 85px;
-    margin: 0 auto;
   }
 }
 </style>

src/sidebar/index.js

@@ -6,6 +6,10 @@ const [createComponent, bem] = createNamespace('sidebar');
 export default createComponent({
   mixins: [ParentMixin('vanSidebar')],
 
+  model: {
+    prop: 'activeKey'
+  },
+
   props: {
     activeKey: {
       type: [Number, String],

src/sidebar/test/index.spec.js

@@ -27,6 +27,29 @@ test('click event & change event', () => {
   wrapper.vm.$destroy();
 });
 
+test('v-model', () => {
+  const wrapper = mount({
+    template: `
+      <sidebar v-model="active">
+        <sidebar-item>Text</sidebar-item>
+        <sidebar-item>Text</sidebar-item>
+      </sidebar>
+    `,
+    components: {
+      Sidebar,
+      SidebarItem
+    },
+    data() {
+      return {
+        active: 0
+      };
+    }
+  });
+
+  wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
+  expect(wrapper.vm.active).toEqual(1);
+});
+
 test('without parent', () => {
   const consoleError = console.error;
   try {