feat(tab-picker):add select event & optimize container scrolltop (didi#436)

xxyan0205 · web-flow · commit c04f87fa0a02 · 2019-05-11T20:24:36.000+08:00
* feat(tab-picker): add select event &amp; optimize the scrollview container

* doc(tab-picker): update readme
diff --git a/components/tab-picker/README.en-US.md b/components/tab-picker/README.en-US.md
@@ -51,6 +51,18 @@ Get all options of selected items
 
 #### TabPicker Events
 
+##### @select(data)
+Option selected event
+
+```
+// data对象
+{
+  index: 0,
+  value: 'value1',
+  options: { value: 'value1', label: 'Item1' }
+}
+```
+
 ##### @change(data)
 Change selection in the tabpicker
 
diff --git a/components/tab-picker/README.md b/components/tab-picker/README.md
@@ -52,6 +52,18 @@ Vue.component(TabPicker.name, TabPicker)
 
 #### TabPicker 事件
 
+##### @select(data)
+选项选中事件
+
+```
+// data对象
+{
+  index: 0,
+  value: 'value1',
+  options: { value: 'value1', label: 'Item1' }
+}
+```
+
 ##### @change(data)
 底部弹窗选中事件
 
diff --git a/components/tab-picker/index.vue b/components/tab-picker/index.vue
@@ -21,7 +21,11 @@
             v-model="currentTab"
             ref="tabs"
           >
-            <md-scroll-view :scrolling-x="false" auto-reflow>
+            <md-scroll-view
+              ref="scrollView"
+              :scrolling-x="false"
+              auto-reflow
+            >
               <md-tab-pane
                 v-for="(pane, index) in panes"
                 :key="pane.name"
@@ -197,9 +201,16 @@ export default {
       this.$nextTick(() => {
         const nextPane = this.panes[index + 1]
 
+        this.$emit('select', {
+          index,
+          value,
+          option: this.panes[index],
+        })
+
         /* istanbul ignore else */
         if (nextPane) {
           this.currentTab = nextPane.name
+          this.$refs.scrollView.scrollTo(0, 0)
         } else if (value !== '') {
           setTimeout(() => {
             this.$emit('change', {
