From dfaec7f076a3790d0f6ce9d3f18480cfde684b94 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Fri, 8 Dec 2017 11:46:53 +0800
Subject: [PATCH] fix tabs

---
 components/tabs/TabPane.vue                 |  3 +--
 components/tabs/Tabs.vue                    | 28 +++++++++++++--------
 components/tabs/demo/basic.vue              |  6 ++---
 components/tabs/demo/card-top.vue           |  6 ++---
 components/tabs/demo/card.vue               |  6 ++---
 components/tabs/demo/custom-add-trigger.vue |  2 +-
 components/tabs/demo/disabled.vue           |  6 ++---
 components/tabs/demo/editable-card.vue      |  2 +-
 components/tabs/demo/extra.vue              | 12 ++++-----
 components/tabs/demo/icon.vue               | 22 ++++++++++++++--
 components/tabs/demo/position.vue           |  6 ++---
 components/tabs/demo/size.vue               |  6 ++---
 components/tabs/demo/slide.vue              | 22 ++++++++--------
 components/tabs/index.vue                   | 11 ++++++--
 components/tabs/index.zh-CN                 |  2 +-
 components/tabs/utils.js                    |  6 ++---
 16 files changed, 88 insertions(+), 58 deletions(-)

diff --git a/components/tabs/TabPane.vue b/components/tabs/TabPane.vue
index 9575569c8..812c52415 100644
--- a/components/tabs/TabPane.vue
+++ b/components/tabs/TabPane.vue
@@ -12,7 +12,6 @@
 export default {
   name: 'TabPane',
   props: {
-    tabKey: [String, Number],
     tab: [String, Number, Function],
     disabled: Boolean,
     closable: Boolean,
@@ -34,7 +33,7 @@ export default {
     },
     active () {
       const { activeKey } = this.$parent
-      return activeKey === this.tabKey
+      return activeKey === this.$vnode.key
     },
     isRender () {
       const {
diff --git a/components/tabs/Tabs.vue b/components/tabs/Tabs.vue
index f943d7040..f4a12319e 100644
--- a/components/tabs/Tabs.vue
+++ b/components/tabs/Tabs.vue
@@ -5,19 +5,19 @@ import TabContent from './TabContent'
 import ScrollableInkTabBar from './ScrollableInkTabBar'
 function getDefaultActiveKey (t) {
   let activeKey
-  t.$slots.default && t.$slots.default.forEach(({ componentOptions = {}}) => {
+  t.$slots.default && t.$slots.default.forEach(({ componentOptions = {}, key: tabKey }) => {
     const child = componentOptions.propsData
     if (child && !activeKey && !child.disabled) {
-      activeKey = child.tabKey
+      activeKey = tabKey
     }
   })
   return activeKey
 }
 function activeKeyIsValid (t, key) {
-  const keys = t.$slots.default && t.$slots.default.map(({ componentOptions = {}}) => {
+  const keys = t.$slots.default && t.$slots.default.map(({ componentOptions = {}, key: tabKey }) => {
     const child = componentOptions.propsData
     if (child) {
-      return child.tabKey
+      return tabKey
     }
   })
   return key !== undefined && keys.indexOf(key) >= 0
@@ -118,18 +118,19 @@ export default {
     getNextActiveKey (next) {
       const activeKey = this.stateActiveKey
       const children = []
-      this.$slots.default && this.$slots.default.forEach(({ componentOptions = {}}) => {
+      this.$slots.default && this.$slots.default.forEach(({ componentOptions = {}, key: tabKey }) => {
         const c = componentOptions.propsData
+
         if (c && !c.disabled && c.disabled !== '') {
           if (next) {
-            children.push(c)
+            children.push({ ...c, tabKey })
           } else {
-            children.unshift(c)
+            children.unshift({ ...c, tabKey })
           }
         }
       })
       const length = children.length
-      let ret = length && children[0].key
+      let ret = length && children[0].tabKey
       children.forEach((child, i) => {
         if (child.tabKey === activeKey) {
           if (i === length - 1) {
@@ -158,8 +159,15 @@ export default {
     } = this
     const panels = []
 
-    $slots.default && $slots.default.forEach(tab => {
-      tab.componentOptions && panels.push(tab.componentOptions.propsData)
+    $slots.default && $slots.default.forEach(({ componentOptions, key: tabKey }) => {
+      if (componentOptions) {
+        if (componentOptions.propsData.tab === undefined) {
+          componentOptions.propsData.tab = $slots[`tab_${tabKey}`]
+            ? h => h('span', [$slots[`tab_${tabKey}`]])
+            : null
+        }
+        panels.push({ ...componentOptions.propsData, tabKey })
+      }
     })
     const tabContentProps = {
       props: {
diff --git a/components/tabs/demo/basic.vue b/components/tabs/demo/basic.vue
index 5d43ebd68..17da286a4 100644
--- a/components/tabs/demo/basic.vue
+++ b/components/tabs/demo/basic.vue
@@ -1,8 +1,8 @@
 <template>
   <Tabs defaultActiveKey="1" @change="callback">
-    <TabPane tab="Tab 1" tabKey="1">Content of Tab Pane 1</TabPane>
-    <TabPane tab="Tab 2" tabKey="2" forceRender>Content of Tab Pane 2</TabPane>
-    <TabPane tab="Tab 3" tabKey="3">Content of Tab Pane 3</TabPane>
+    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
+    <TabPane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</TabPane>
+    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
   </Tabs>
 </template>
 <script>
diff --git a/components/tabs/demo/card-top.vue b/components/tabs/demo/card-top.vue
index 444ab42f8..cd41e5faa 100644
--- a/components/tabs/demo/card-top.vue
+++ b/components/tabs/demo/card-top.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="card-container">
     <Tabs type="card">
-      <TabPane tab="Tab Title 1" tabKey="1">
+      <TabPane tab="Tab Title 1" key="1">
         <p>Content of Tab Pane 1</p>
         <p>Content of Tab Pane 1</p>
         <p>Content of Tab Pane 1</p>
       </TabPane>
-      <TabPane tab="Tab Title 2" tabKey="2">
+      <TabPane tab="Tab Title 2" key="2">
         <p>Content of Tab Pane 2</p>
         <p>Content of Tab Pane 2</p>
         <p>Content of Tab Pane 2</p>
       </TabPane>
-      <TabPane tab="Tab Title 3" tabKey="3">
+      <TabPane tab="Tab Title 3" key="3">
         <p>Content of Tab Pane 3</p>
         <p>Content of Tab Pane 3</p>
         <p>Content of Tab Pane 3</p>
diff --git a/components/tabs/demo/card.vue b/components/tabs/demo/card.vue
index 916b8acdc..cbe619b5f 100644
--- a/components/tabs/demo/card.vue
+++ b/components/tabs/demo/card.vue
@@ -1,8 +1,8 @@
 <template>
   <Tabs @change="callback" type="card">
-    <TabPane tab="Tab 1" tabKey="1">Content of Tab Pane 1</TabPane>
-    <TabPane tab="Tab 2" tabKey="2">Content of Tab Pane 2</TabPane>
-    <TabPane tab="Tab 3" tabKey="3">Content of Tab Pane 3</TabPane>
+    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
+    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
+    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
   </Tabs>
 </template>
 <script>
diff --git a/components/tabs/demo/custom-add-trigger.vue b/components/tabs/demo/custom-add-trigger.vue
index 0b4d447c8..d90cbb8a5 100644
--- a/components/tabs/demo/custom-add-trigger.vue
+++ b/components/tabs/demo/custom-add-trigger.vue
@@ -9,7 +9,7 @@
       type="editable-card"
       @edit="onEdit"
     >
-    <TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :tabKey="pane.key" :closable="pane.closable">
+    <TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
       {{pane.content}}
     </TabPane>
   </Tabs>
diff --git a/components/tabs/demo/disabled.vue b/components/tabs/demo/disabled.vue
index 7343794cc..5b0db4e41 100644
--- a/components/tabs/demo/disabled.vue
+++ b/components/tabs/demo/disabled.vue
@@ -1,8 +1,8 @@
 <template>
   <Tabs defaultActiveKey="1">
-    <TabPane tab="Tab 1" tabKey="1">Tab 1</TabPane>
-    <TabPane tab="Tab 2" disabled tabKey="2">Tab 2</TabPane>
-    <TabPane tab="Tab 3" tabKey="3">Tab 3</TabPane>
+    <TabPane tab="Tab 1" key="1">Tab 1</TabPane>
+    <TabPane tab="Tab 2" disabled key="2">Tab 2</TabPane>
+    <TabPane tab="Tab 3" key="3">Tab 3</TabPane>
   </Tabs>
 </template>
 <script>
diff --git a/components/tabs/demo/editable-card.vue b/components/tabs/demo/editable-card.vue
index ecf56dfb9..483d161fe 100644
--- a/components/tabs/demo/editable-card.vue
+++ b/components/tabs/demo/editable-card.vue
@@ -4,7 +4,7 @@
     type="editable-card"
     @edit="onEdit"
   >
-    <TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :tabKey="pane.key" :closable="pane.closable">
+    <TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
       {{pane.content}}
     </TabPane>
   </Tabs>
diff --git a/components/tabs/demo/extra.vue b/components/tabs/demo/extra.vue
index ce749923d..a6da74b9a 100644
--- a/components/tabs/demo/extra.vue
+++ b/components/tabs/demo/extra.vue
@@ -1,14 +1,14 @@
 <template>
 <div>
   <Tabs :tabBarExtraContent="operations">
-    <TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
-    <TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
-    <TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
+    <TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
+    <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
+    <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
   </Tabs>
   <Tabs>
-    <TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
-    <TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
-    <TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
+    <TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
+    <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
+    <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
     <AntButton slot="tabBarExtraContent">Extra Action</AntButton>
   </Tabs>
 </div>
diff --git a/components/tabs/demo/icon.vue b/components/tabs/demo/icon.vue
index ace4531fd..f4da4c164 100644
--- a/components/tabs/demo/icon.vue
+++ b/components/tabs/demo/icon.vue
@@ -1,12 +1,30 @@
 <template>
+<div>
   <Tabs defaultActiveKey="2">
-    <TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'apple')" tabKey="1">
+    <TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'apple')" key="1">
       Tab 1
     </TabPane>
-    <TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'android')" tabKey="2">
+    <TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'android')" key="2">
       Tab 2
     </TabPane>
   </Tabs>
+  <Tabs defaultActiveKey="2">
+    <span slot="tab_1">
+      <Icon type="apple" />
+      Tab 1
+    </span>
+    <TabPane key="1">
+      Tab 1
+    </TabPane>
+    <span slot="tab_2">
+      <Icon type="android" />
+      Tab 2
+    </span>
+    <TabPane key="2">
+      Tab 2
+    </TabPane>
+  </Tabs>
+</div>
 </template>
 <script>
 import { Tabs, Icon } from 'antd'
diff --git a/components/tabs/demo/position.vue b/components/tabs/demo/position.vue
index e79faf24c..19a299268 100644
--- a/components/tabs/demo/position.vue
+++ b/components/tabs/demo/position.vue
@@ -7,9 +7,9 @@
       <RadioButton value="right">right</RadioButton>
     </RadioGroup>
     <Tabs defaultActiveKey="1" :tabPosition="tabPosition">
-      <TabPane tab="Tab 1" tabKey="1">Content of Tab 1</TabPane>
-      <TabPane tab="Tab 2" tabKey="2">Content of Tab 2</TabPane>
-      <TabPane tab="Tab 3" tabKey="3">Content of Tab 3</TabPane>
+      <TabPane tab="Tab 1" key="1">Content of Tab 1</TabPane>
+      <TabPane tab="Tab 2" key="2">Content of Tab 2</TabPane>
+      <TabPane tab="Tab 3" key="3">Content of Tab 3</TabPane>
     </Tabs>
   </div>
 
diff --git a/components/tabs/demo/size.vue b/components/tabs/demo/size.vue
index 7ccecdee5..59bea5fc5 100644
--- a/components/tabs/demo/size.vue
+++ b/components/tabs/demo/size.vue
@@ -1,8 +1,8 @@
 <template>
   <Tabs defaultActiveKey="2" size="small">
-    <TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
-    <TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
-    <TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
+    <TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
+    <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
+    <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
   </Tabs>
 </template>
 <script>
diff --git a/components/tabs/demo/slide.vue b/components/tabs/demo/slide.vue
index 8b9158181..d810b4686 100644
--- a/components/tabs/demo/slide.vue
+++ b/components/tabs/demo/slide.vue
@@ -5,17 +5,17 @@
       <RadioButton value="left">Vertical</RadioButton>
     </RadioGroup>
     <Tabs defaultActiveKey="1" :tabPosition="mode" :style="{ height: '200px'}" @prevClick="callback" @nextClick="callback">
-      <TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
-      <TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
-      <TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
-      <TabPane tab="Tab 4" tabKey="4">Content of tab 4</TabPane>
-      <TabPane tab="Tab 5" tabKey="5">Content of tab 5</TabPane>
-      <TabPane tab="Tab 6" tabKey="6">Content of tab 6</TabPane>
-      <TabPane tab="Tab 7" tabKey="7">Content of tab 7</TabPane>
-      <TabPane tab="Tab 8" tabKey="8">Content of tab 8</TabPane>
-      <TabPane tab="Tab 9" tabKey="9">Content of tab 9</TabPane>
-      <TabPane tab="Tab 10" tabKey="10">Content of tab 10</TabPane>
-      <TabPane tab="Tab 11" tabKey="11">Content of tab 11</TabPane>
+      <TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
+      <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
+      <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
+      <TabPane tab="Tab 4" key="4">Content of tab 4</TabPane>
+      <TabPane tab="Tab 5" key="5">Content of tab 5</TabPane>
+      <TabPane tab="Tab 6" key="6">Content of tab 6</TabPane>
+      <TabPane tab="Tab 7" key="7">Content of tab 7</TabPane>
+      <TabPane tab="Tab 8" key="8">Content of tab 8</TabPane>
+      <TabPane tab="Tab 9" key="9">Content of tab 9</TabPane>
+      <TabPane tab="Tab 10" key="10">Content of tab 10</TabPane>
+      <TabPane tab="Tab 11" key="11">Content of tab 11</TabPane>
     </Tabs>
   </div>
 
diff --git a/components/tabs/index.vue b/components/tabs/index.vue
index 61d0529f5..332f496b5 100644
--- a/components/tabs/index.vue
+++ b/components/tabs/index.vue
@@ -101,8 +101,15 @@ export default {
       [`${prefixCls}-${type}`]: true,
       [`${prefixCls}-no-animation`]: !tabPaneAnimated,
     }
-    tabBarExtraContent = tabBarExtraContent || ((h) => {
-      return h('span', [$slots.tabBarExtraContent])
+    tabBarExtraContent = tabBarExtraContent === undefined && $slots.tabBarExtraContent
+      ? h => h('span', [$slots.tabBarExtraContent])
+      : tabBarExtraContent
+    $slots.default && $slots.default.forEach(({ componentOptions, key: tabKey }) => {
+      if (componentOptions && componentOptions.propsData.tab === undefined) {
+        componentOptions.propsData.tab = $slots[`tab_${tabKey}`]
+          ? h => h('span', [$slots[`tab_${tabKey}`]])
+          : null
+      }
     })
     const tabBarProps = {
       inkBarAnimated,
diff --git a/components/tabs/index.zh-CN b/components/tabs/index.zh-CN
index fb06b446c..790a7a0ec 100644
--- a/components/tabs/index.zh-CN
+++ b/components/tabs/index.zh-CN
@@ -48,5 +48,5 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
-| tabKey | 对应 activeKey | string | 无 |
+| key | 对应 activeKey | string | 无 |
 | tab | 选项卡头显示文字 | string\|Function | 无 |
diff --git a/components/tabs/utils.js b/components/tabs/utils.js
index df344c5b5..4502b5a6f 100644
--- a/components/tabs/utils.js
+++ b/components/tabs/utils.js
@@ -1,5 +1,4 @@
 export function toArray (children) {
-  // allow [c,[a,b]]
   const c = []
   children.forEach(child => {
     if (child.data) {
@@ -12,8 +11,7 @@ export function toArray (children) {
 export function getActiveIndex (children, activeKey) {
   const c = toArray(children)
   for (let i = 0; i < c.length; i++) {
-    const tabKey = c[i].tabKey || c[i].componentOptions.propsData.tabKey
-    if (tabKey === activeKey) {
+    if (c[i].key === activeKey) {
       return i
     }
   }
@@ -22,7 +20,7 @@ export function getActiveIndex (children, activeKey) {
 
 export function getActiveKey (children, index) {
   const c = toArray(children)
-  return c[index].tabKey
+  return c[index].key
 }
 
 export function setTransform (style, v) {