From c82a6e5420f155866c002aba2336446250607ef4 Mon Sep 17 00:00:00 2001
From: zhenyulei <yulei20080106@126.com>
Date: Mon, 12 Oct 2020 11:34:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9tab=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E4=B8=8D=E4=B8=80=E8=87=B4=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/tab/demo.vue |  6 +++---
 src/packages/tab/tab.vue  | 36 ++++++++++++++++++++----------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/packages/tab/demo.vue b/src/packages/tab/demo.vue
index f7c51ddd0..ae7166835 100644
--- a/src/packages/tab/demo.vue
+++ b/src/packages/tab/demo.vue
@@ -40,7 +40,7 @@
     </nut-tab>
 
     <h4>纵向tab切换超出界面高度，设置tab区域高度</h4>
-    <nut-tab @tab-switch="tabSwitch" position-nav="left" :is-scroll="true" :wrapper-height="200">
+    <nut-tab @tab-switch="tabSwitch" position-nav="left" :is-scroll="true" :wrapper-height="200" :def-index="3">
       <nut-tab-panel
         v-for="value in editableTabs"
         v-bind:key="value.tabTitle"
@@ -69,7 +69,7 @@
         v-html="value.content"
       ></nut-tab-panel>
     </nut-tab>
-    <div style="width: 100%; text-align: center;">
+    <div style="width: 100%; text-align: center">
       <nut-button @click="resetHandler" type="light">重置Tab页面</nut-button>
       <nut-button @click="clickHandler">更新Tab页面</nut-button>
     </div>
@@ -147,7 +147,7 @@ export default {
   },
   methods: {
     tabSwitch: function (index, event) {
-      console.log(index + '--' + event);
+      //console.log(index + '--' + event);
       //this.defIndex = index;
     },
     clickHandler: function () {
diff --git a/src/packages/tab/tab.vue b/src/packages/tab/tab.vue
index 1566573ea..f33fad2fb 100644
--- a/src/packages/tab/tab.vue
+++ b/src/packages/tab/tab.vue
@@ -150,27 +150,31 @@ export default {
         }
       }
       this.$nextTick(() => {
-        let tapWidth;
-        if (this.positionNav == 'top' || this.positionNav == 'bottom') {
-          this.navWidth = this.$refs.navlist.querySelector('.nut-title-nav').offsetWidth;
-          tapWidth = this.$refs.navlist.offsetWidth;
-        } else {
-          this.navWidth = this.$refs.navlist.querySelector('.nut-title-nav').offsetHeight;
-          tapWidth = this.$refs.navlist.offsetHeight;
-        }
-        this.initX = parseInt(this.navWidth * this.defIndex);
-        this.tapWidth = tapWidth / 2 - this.navWidth / 2;
+        this.handleTab(this.defIndex);
       });
     },
+    handleTab(index) {
+      const currEle = this.$refs.navlist.querySelectorAll('.nut-title-nav')[index];
+      if (this.positionNav == 'top' || this.positionNav == 'bottom') {
+        const currLeft = currEle.offsetLeft;
+        const currWidth = currEle.offsetWidth;
+        const tapWidth = this.$refs.navlist.offsetWidth;
+        this.navWidth = currWidth;
+        this.initX = currLeft;
+        this.$refs.navlist.scroll(currLeft - tapWidth / 2 + currWidth / 2, 0);
+      } else {
+        const currTop = currEle.offsetTop;
+        const currHeight = currEle.offsetHeight;
+        const tapHeight = this.$refs.navlist.offsetHeight;
+        this.navWidth = currHeight;
+        this.initX = currTop;
+        this.$refs.navlist.scroll(0, currTop - tapHeight / 2 + currHeight / 2);
+      }
+    },
     switchTab: function (index, event, disable) {
       if (!disable) {
         this.activeIndex = index;
-        this.initX = parseInt(this.navWidth * index);
-        if (this.positionNav == 'top' || this.positionNav == 'bottom') {
-          this.$refs.navlist.scroll(this.initX - this.tapWidth, 0);
-        } else {
-          this.$refs.navlist.scroll(0, this.initX - this.tapWidth);
-        }
+        this.handleTab(index);
         let items = this.$refs.items.children;
         for (let i = 0; i < items.length; i++) {
           if (i == index) {
-- 
GitLab