From 77bafb3181e5dae09817aed0471ec38cc8963ba2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 6 Dec 2016 23:11:44 +0800
Subject: [PATCH] update Tabs

updata
---
 src/components/tabs/pane.vue    |  2 +-
 src/components/tabs/tabs.vue    | 22 ++++++++++++++++++----
 src/styles/components/tabs.less |  4 +---
 test/routers/tabs.vue           |  2 +-
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/tabs/pane.vue b/src/components/tabs/pane.vue
index 0fda47b4..fcd12b0b 100644
--- a/src/components/tabs/pane.vue
+++ b/src/components/tabs/pane.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="prefixCls"><slot></slot></div>
+    <div :class="prefixCls" v-show="show"><slot></slot></div>
 </template>
 <script>
     const prefixCls = 'ivu-tabs-tabpane';
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index b0255af7..6aa84cef 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -74,13 +74,17 @@
             contentClasses () {
                 return [
                     `${prefixCls}-content`,
-                    `${prefixCls}-content-animated`
+                    {
+                        [`${prefixCls}-content-animated`]: this.animated
+                    }
                 ]
             },
             barClasses () {
                 return [
                     `${prefixCls}-ink-bar`,
-                    `${prefixCls}-ink-bar-animated`
+                    {
+                        [`${prefixCls}-ink-bar-animated`]: this.animated
+                    }
                 ]
             },
             contentStyle () {
@@ -98,10 +102,14 @@
             barStyle () {
                 let style = {
                     display: 'none',
-                    width: `${this.barWidth}px`,
-                    transform: `translate3d(${this.barOffset}px, 0px, 0px)`
+                    width: `${this.barWidth}px`
                 };
                 if (this.type === 'line') style.display = 'block';
+                if (this.animated) {
+                    style.transform = `translate3d(${this.barOffset}px, 0px, 0px)`;
+                } else {
+                    style.left = `${this.barOffset}px`;
+                }
 
                 return style;
             }
@@ -124,6 +132,7 @@
                         if (!this.activeKey) this.activeKey = pane.key || index;
                     }
                 });
+                this.updateStatus();
                 this.updateBar();
             },
             updateBar () {
@@ -146,6 +155,10 @@
                     }
                 });
             },
+            updateStatus () {
+                const tabs = this.getTabs();
+                tabs.forEach(tab => tab.show = (tab.key === this.activeKey) || this.animated);
+            },
             tabCls (item) {
                 return [
                     `${prefixCls}-tab`,
@@ -159,6 +172,7 @@
                 const nav = this.navList[index];
                 if (nav.disabled) return;
                 this.activeKey = nav.key;
+                this.updateStatus();
                 this.$emit('on-click', nav.key);
             },
             handleRemove (index) {
diff --git a/src/styles/components/tabs.less b/src/styles/components/tabs.less
index 0e5ceb49..04bfd8b6 100644
--- a/src/styles/components/tabs.less
+++ b/src/styles/components/tabs.less
@@ -194,9 +194,7 @@
 
 .@{tabs-prefix-cls}-no-animation{
     .@{tabs-prefix-cls}-content {
-        &-animated {
-            transform: none!important;
-        }
+        transform: none!important;
 
         > .@{tabs-prefix-cls}-tabpane-inactive {
             display: none;
diff --git a/test/routers/tabs.vue b/test/routers/tabs.vue
index 44e4ba94..2eb985c1 100644
--- a/test/routers/tabs.vue
+++ b/test/routers/tabs.vue
@@ -1,5 +1,5 @@
 <template>
-    <i-button @click="toggleClose" :animated="false">closable</i-button>
+    <i-button @click="toggleClose">closable</i-button>
 
     <Tabs type="line" :closable="closable" :animated="false">
         <Tab-pane label="Tab 1">Tab1 content</Tab-pane>