From 81395eca7d0f6ed3c52ace623e8235cca130c509 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 6 Sep 2019 10:54:50 +0800
Subject: [PATCH] Tabs support scroll

---
 examples/routers/tabs.vue    | 10 ++++++----
 src/components/tabs/tabs.vue | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index 3f2c02f9..380e3cdb 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -1,8 +1,10 @@
 <template>
-    <Tabs type="card">
-        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
-        <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
-    </Tabs>
+    <div style="height: 5000px">
+        <Tabs type="card">
+            <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
+            <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
+        </Tabs>
+    </div>
 </template>
 <script>
     export default {
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index ed816aa1..c3b172f1 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -12,7 +12,7 @@
                 <div ref="navWrap" :class="[prefixCls + '-nav-wrap', scrollable ? prefixCls + '-nav-scrollable' : '']">
                     <span :class="[prefixCls + '-nav-prev', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollPrev"><Icon type="ios-arrow-back"></Icon></span>
                     <span :class="[prefixCls + '-nav-next', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollNext"><Icon type="ios-arrow-forward"></Icon></span>
-                    <div ref="navScroll" :class="[prefixCls + '-nav-scroll']">
+                    <div ref="navScroll" :class="[prefixCls + '-nav-scroll']" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
                         <div ref="nav" :class="[prefixCls + '-nav']" :style="navStyle">
                             <div :class="barClasses" :style="barStyle"></div>
                             <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
@@ -441,6 +441,20 @@
                     }
                 }
             },
+            handleScroll (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                const type = e.type;
+                let delta = 0;
+                if (type === 'DOMMouseScroll' || type === 'mousewheel') {
+                    delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40;
+                }
+                if (delta > 0) {
+                    this.scrollPrev();
+                } else {
+                    this.scrollNext();
+                }
+            },
             handleResize(){
                 this.updateNavScroll();
             },