fix

components/tabs/InkTabBar.vue

@@ -5,9 +5,9 @@ import TabBarMixin from './TabBarMixin'
 export default {
   name: 'InkTabBar',
   mixins: [TabBarMixin, InkTabBarMixin],
-  render () {
+  render (h) {
     const inkBarNode = this.getInkBarNode()
-    const tabs = this.getTabs()
+    const tabs = this.getTabs(h)
     return this.getRootNode([inkBarNode, tabs])
   },
 }

components/tabs/InkTabBarMixin.js

@@ -35,7 +35,7 @@ function offset (elem) {
 }
 
 function componentDidUpdate (component, init) {
-  const { styles } = component.$props
+  const { styles = {}} = component.$props
   const wrapNode = component.$refs.nav || component.$refs.root
   const containerOffset = offset(wrapNode)
   const inkBarNode = component.$refs.inkBar
@@ -111,9 +111,8 @@ export default {
   },
   updated () {
     this.$nextTick(function () {
-      componentDidUpdate(this, true)
+      componentDidUpdate(this)
     })
-    componentDidUpdate(this)
   },
 
   mounted () {

components/tabs/ScrollableInkTabBar.vue

@@ -6,9 +6,9 @@ import TabBarMixin from './TabBarMixin'
 export default {
   name: 'ScrollableInkTabBar',
   mixins: [TabBarMixin, InkTabBarMixin, ScrollableTabBarMixin],
-  render () {
+  render (h) {
     const inkBarNode = this.getInkBarNode()
-    const tabs = this.getTabs()
+    const tabs = this.getTabs(h)
     const scrollbarNode = this.getScrollBarNode([inkBarNode, tabs])
     return this.getRootNode(scrollbarNode)
   },

components/tabs/ScrollableTabBar.vue

@@ -5,9 +5,9 @@ import TabBarMixin from './TabBarMixin'
 export default {
   name: 'ScrollableTabBar',
   mixins: [TabBarMixin, ScrollableTabBarMixin],
-  render () {
+  render (h) {
     const inkBarNode = this.getInkBarNode()
-    const tabs = this.getTabs()
+    const tabs = this.getTabs(h)
     const scrollbarNode = this.getScrollBarNode([inkBarNode, tabs])
     return this.getRootNode(scrollbarNode)
   },

components/tabs/ScrollableTabBarMixin.js

@@ -53,9 +53,9 @@ export default {
 
     },
     setNextPrev () {
-      const navNode = this.nav
+      const navNode = this.$refs.nav
       const navNodeWH = this.getOffsetWH(navNode)
-      const navWrapNode = this.navWrap
+      const navWrapNode = this.$refs.navWrap
       const navWrapNodeWH = this.getOffsetWH(navWrapNode)
       let { offset } = this
       const minOffset = navWrapNodeWH - navNodeWH
@@ -110,7 +110,7 @@ export default {
         this.offset = target
         let navOffset = {}
         const tabBarPosition = this.$props.tabBarPosition
-        const navStyle = this.nav.style
+        const navStyle = this.$refs.nav.style
         const transformSupported = isTransformSupported(navStyle)
         if (tabBarPosition === 'left' || tabBarPosition === 'right') {
           if (transformSupported) {
@@ -177,7 +177,8 @@ export default {
     },
 
     scrollToActiveTab (e) {
-      const { activeTab, navWrap } = this
+      const { activeTab } = this
+      const navWrap = this.$refs.navWrap
       if (e && e.target !== e.currentTarget || !activeTab) {
         return
       }
@@ -205,7 +206,7 @@ export default {
 
     prevClick (e) {
       this.$props.onPrevClick(e)
-      const navWrapNode = this.navWrap
+      const navWrapNode = this.$refs.navWrap
       const navWrapNodeWH = this.getOffsetWH(navWrapNode)
       const { offset } = this
       this.setOffset(offset + navWrapNodeWH)
@@ -213,7 +214,7 @@ export default {
 
     nextClick (e) {
       this.$props.onNextClick(e)
-      const navWrapNode = this.navWrap
+      const navWrapNode = this.$refs.navWrap
       const navWrapNodeWH = this.getOffsetWH(navWrapNode)
       const { offset } = this
       this.setOffset(offset - navWrapNodeWH)

components/tabs/TabBar.vue

@@ -26,9 +26,9 @@ export default {
     activeKey: String,
     panels: Array,
   },
-  render (createElement) {
-    const tabs = this.getTabs()
-    return this.getRootNode(tabs, createElement)
+  render (h) {
+    const tabs = this.getTabs(h)
+    return this.getRootNode(tabs, h)
   },
 }
 </script>

components/tabs/TabBarMixin.js

@@ -21,14 +21,16 @@ export default {
     panels: Array,
   },
   methods: {
-    getTabs () {
+    getTabs (h) {
       const { panels: children, activeKey, prefixCls } = this
       const rst = []
       children.forEach((child) => {
         if (!child) {
           return
         }
-        const key = child.pKey
+        // componentOptions.propsData中获取的值disabled没有根据类型初始化, 会出现空字符串
+        child.disabled = child.disabled === '' || child.disabled
+        const key = child.tabKey
         let cls = activeKey === key ? `${prefixCls}-tab-active` : ''
         cls += ` ${prefixCls}-tab`
         if (child.disabled) {
@@ -52,7 +54,7 @@ export default {
             onClick={onClick}
             ref={activeKey === key ? 'activeTab' : undefined}
           >
-            {child.tab}
+            {typeof child.tab === 'function' ? child.tab(h, key) : child.tab}
           </div>
         )
       })
@@ -71,7 +73,7 @@ export default {
       let children = contents
       if ($slots.default) {
         children = [
-          <div key='extra' class='`${prefixCls}-extra-content`' style={tabBarExtraContentStyle}>
+          <div key='extra' class={`${prefixCls}-extra-content`} style={tabBarExtraContentStyle}>
             {$slots.default}
           </div>,
           contents,

components/tabs/TabPane.vue

@@ -12,12 +12,14 @@
 export default {
   name: 'TabPane',
   props: {
-    pKey: [String, Number],
-    tab: [String, Number],
+    tabKey: [String, Number],
+    tab: [String, Number, Function],
     forceRender: Boolean,
+    disabled: Boolean,
     // placeholder: [Function, String, Number],
   },
   data () {
+    console.log(this.disabled)
     return {
     }
   },
@@ -33,7 +35,7 @@ export default {
     },
     active () {
       const { activeKey } = this.$parent
-      return activeKey === this.pKey
+      return activeKey === this.tabKey
     },
     isRender () {
       const {

components/tabs/Tabs.vue

@@ -1,21 +1,26 @@
 <script>
 import Icon from '../icon'
 import KeyCode from './KeyCode'
-import TabBar from './TabBar'
 import TabContent from './TabContent'
 import ScrollableInkTabBar from './ScrollableInkTabBar'
 function getDefaultActiveKey (t) {
   let activeKey
-  t.$slot.default.forEach((child) => {
+  t.$slots.default.forEach(({ componentOptions = {}}) => {
+    const child = componentOptions.propsData
     if (child && !activeKey && !child.disabled) {
-      activeKey = child.pKey
+      activeKey = child.tabKey
     }
   })
   return activeKey
 }
 function activeKeyIsValid (t, key) {
-  const keys = t.$slot.default.map(child => child && child.pKey)
-  return keys.indexOf(key) >= 0
+  const keys = t.$slots.default.map(({ componentOptions = {}}) => {
+    const child = componentOptions.propsData
+    if (child) {
+      return child.tabKey
+    }
+  })
+  return key !== undefined && keys.indexOf(key) >= 0
 }
 export default {
   name: 'Tabs',
@@ -35,11 +40,8 @@ export default {
         return ['top', 'bottom', 'left', 'right'].includes(value)
       },
     },
-    renderTabBar: {
-      type: Function,
-      default: () => {},
-    },
     tabBarProps: Object,
+    tabContentProps: Object,
     destroyInactiveTabPane: Boolean,
     activeKey: String,
     defaultActiveKey: String,
@@ -59,7 +61,7 @@ export default {
     },
   },
   beforeUpdate () {
-    if ('activeKey' in this) {
+    if (this.activeKey) {
       this.stateActiveKey = this.activeKey
     } else if (!activeKeyIsValid(this, this.stateActiveKey)) {
       this.stateActiveKey = getDefaultActiveKey(this)
@@ -68,9 +70,9 @@ export default {
   methods: {
     getStateActiveKey () {
       let activeKey
-      if ('activeKey' in this) {
+      if (this.activeKey) {
         activeKey = this.activeKey
-      } else if ('defaultActiveKey' in this) {
+      } else if (this.defaultActiveKey) {
         activeKey = this.defaultActiveKey
       } else {
         activeKey = getDefaultActiveKey(this)
@@ -100,7 +102,7 @@ export default {
 
     setActiveKey (activeKey) {
       if (this.stateActiveKey !== activeKey) {
-        if (!('activeKey' in this)) {
+        if (!this.activeKey) {
           this.stateActiveKey = activeKey
         }
         // this.stateActiveKey = activeKey
@@ -124,11 +126,11 @@ export default {
       const length = children.length
       let ret = length && children[0].key
       children.forEach((child, i) => {
-        if (child.pKey === activeKey) {
+        if (child.tabKey === activeKey) {
           if (i === length - 1) {
-            ret = children[0].pKey
+            ret = children[0].tabKey
           } else {
-            ret = children[i + 1].pKey
+            ret = children[i + 1].tabKey
           }
         }
       })
@@ -158,6 +160,7 @@ export default {
     }
     const tabContentProps = {
       props: {
+        ...this.tabContentProps,
         prefixCls,
         tabBarPosition,
         activeKey: stateActiveKey,
@@ -168,7 +171,7 @@ export default {
     }
     const tabBarProps = {
       props: {
-        ...tabBarProps,
+        ...this.tabBarProps,
         panels: panels,
         prefixCls: prefixCls,
         onKeyDown: onNavKeyDown,
@@ -177,6 +180,7 @@ export default {
         activeKey: stateActiveKey,
         key: 'tabBar',
       },
+      style: this.tabBarProps.style || {},
     }
     const contents = [
       <ScrollableInkTabBar {...tabBarProps}>

components/tabs/demo/basic.vue

@@ -1,23 +1,20 @@
 <template>
-  <div>
-    <Tabs v-model="activeKey">
-      <span slot="tabBarExtraContent">kkk</span>
-      <TabPane pKey="test1" tab="tab1">hello</TabPane>
-      <TabPane pKey="test2" tab="tab2">world</TabPane>
-    </Tabs>
-  </div>
+  <Tabs defaultActiveKey="1" @change="callback">
+    <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>
+  </Tabs>
 </template>
 <script>
 import { Tabs } from 'antd'
 export default {
   data () {
     return {
-      activeKey: 'test1',
     }
   },
   methods: {
-    tabBarExtraContent (h) {
-      return h('span', 'hhhh')
+    callback (key) {
+      console.log(key)
     },
   },
   components: {

components/tabs/demo/disabled.vue

@@ -0,0 +1,16 @@
+<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>
+  </Tabs>
+</template>
+<script>
+import { Tabs } from 'antd'
+export default {
+  components: {
+    Tabs,
+    TabPane: Tabs.TabPane,
+  },
+}
+</script>

components/tabs/demo/icon.vue

@@ -0,0 +1,25 @@
+<template>
+  <Tabs defaultActiveKey="2">
+    <TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'apple')" tabKey="1">
+      Tab 1
+    </TabPane>
+    <TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'android')" tabKey="2">
+      Tab 2
+    </TabPane>
+  </Tabs>
+</template>
+<script>
+import { Tabs, Icon } from 'antd'
+export default {
+  methods: {
+    renderTab (h, tabKey, iconType) {
+      return h('span', [<Icon type={iconType} />, `Tab ${tabKey}`])
+    },
+  },
+  components: {
+    Tabs,
+    TabPane: Tabs.TabPane,
+    Icon,
+  },
+}
+</script>

components/tabs/demo/slide.vue

@@ -0,0 +1,41 @@
+<template>
+  <div style="width: 500px">
+    <RadioGroup v-model="mode" :style="{ marginBottom: 8 }">
+      <RadioButton value="top">Horizontal</RadioButton>
+      <RadioButton value="left">Vertical</RadioButton>
+    </RadioGroup>
+    <Tabs defaultActiveKey="1" :tabPosition="mode" :style="{ height: '200px'}">
+      <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>
+    </Tabs>
+  </div>
+
+</template>
+<script>
+import { Tabs, Radio } from 'antd'
+export default {
+  data () {
+    return {
+      mode: 'top',
+    }
+  },
+  methods: {
+  },
+  components: {
+    Tabs,
+    TabPane: Tabs.TabPane,
+    Radio,
+    RadioGroup: Radio.Group,
+    RadioButton: Radio.Button,
+  },
+}
+</script>

components/tabs/index.vue

@@ -56,10 +56,11 @@ export default {
     },
 
     handleChange (activeKey) {
-      const onChange = this.$props.onChange
-      if (onChange) {
-        onChange(activeKey)
-      }
+      // const onChange = this.$props.onChange
+      // if (onChange) {
+      //   onChange(activeKey)
+      // }
+      this.$emit('change', activeKey)
     },
   },
 
@@ -77,7 +78,6 @@ export default {
       size,
       type = 'line',
       tabPosition,
-      children,
       tabBarStyle,
       // hideAdd,
       onTabClick,
@@ -143,16 +143,16 @@ export default {
       </div>
     ) : null
 
-    const renderTabBar = () => (
-      <ScrollableInkTabBar
-        inkBarAnimated={inkBarAnimated}
-        extraContent={tabBarExtraContent}
-        onTabClick={onTabClick}
-        onPrevClick={onPrevClick}
-        onNextClick={onNextClick}
-        style={tabBarStyle}
-      />
-    )
+    // const renderTabBar = () => (
+    //   <ScrollableInkTabBar
+    //     inkBarAnimated={inkBarAnimated}
+    //     extraContent={tabBarExtraContent}
+    //     onTabClick={onTabClick}
+    //     onPrevClick={onPrevClick}
+    //     onNextClick={onNextClick}
+    //     style={tabBarStyle}
+    //   />
+    // )
     const tabBarProps = {
       inkBarAnimated,
       extraContent: tabBarExtraContent,
@@ -161,15 +161,18 @@ export default {
       onNextClick,
       style: tabBarStyle,
     }
+    const tabContentProps = {
+      animated: tabPaneAnimated,
+      animatedWithMargin: true,
+    }
     return (
       <Tabs
         {...this.$props}
         class={cls}
         tabBarPosition={tabPosition}
-        renderTabBar={renderTabBar}
-        // renderTabContent={() => <TabContent animated={tabPaneAnimated} animatedWithMargin />}
         onChange={this.handleChange}
         tabBarProps={tabBarProps}
+        tabContentProps={tabContentProps}
       >
         {childrenWithClose || this.$slots.default}
       </Tabs>

components/tabs/utils.js

@@ -12,8 +12,8 @@ export function toArray (children) {
 export function getActiveIndex (children, activeKey) {
   const c = toArray(children)
   for (let i = 0; i < c.length; i++) {
-    const pKey = c[i].pKey || c[i].componentOptions.propsData.pKey
-    if (pKey === activeKey) {
+    const tabKey = c[i].tabKey || c[i].componentOptions.propsData.tabKey
+    if (tabKey === activeKey) {
       return i
     }
   }
@@ -22,7 +22,7 @@ export function getActiveIndex (children, activeKey) {
 
 export function getActiveKey (children, index) {
   const c = toArray(children)
-  return c[index].pKey
+  return c[index].tabKey
 }
 
 export function setTransform (style, v) {