优化 tabs

components/tabs/index.js

@@ -1,6 +1,6 @@
 import Tabs from './index.vue'
-import TabPane from './TabPane'
+import TabPane from './src/TabPane'
-import TabContent from './TabContent'
+import TabContent from './src/TabContent'
 Tabs.TabPane = TabPane
 export default Tabs
 export { TabPane, TabContent }

components/tabs/index.vue

@@ -1,5 +1,5 @@
 <script>
-import Tabs from './Tabs'
+import Tabs from './src/Tabs'
 import isFlexSupported from '../_util/isFlexSupported'
 import hasProp from '../_util/props-util'
 export default {
@@ -75,7 +75,6 @@ export default {
       tabPosition,
       tabBarStyle,
       hideAdd,
-      onTabClick,
       onPrevClick,
       onNextClick,
       animated,
@@ -114,36 +113,38 @@ export default {
       }
     })
     const tabBarProps = {
-      inkBarAnimated,
+      props: {
-      onTabClick,
+        hideAdd,
-      onPrevClick,
+        removeTab: this.removeTab,
-      onNextClick,
+        createNewTab: this.createNewTab,
+        inkBarAnimated,
+      },
+      on: {
+        // tabClick: onTabClick,
+        prevClick: onPrevClick,
+        nextClick: onNextClick,
+      },
       style: tabBarStyle,
-      hideAdd,
-      removeTab: this.removeTab,
-      createNewTab: this.createNewTab,
     }
     const tabContentProps = {
-      animated: tabPaneAnimated,
+      props: {
-      animatedWithMargin: true,
+        animated: tabPaneAnimated,
+        animatedWithMargin: true,
+      },
     }
-    const self = this
     const tabsProps = {
       props: {
         prefixCls,
         tabBarPosition: tabPosition,
-        onChange: this.handleChange,
         tabBarProps: tabBarProps,
         tabContentProps: tabContentProps,
         destroyInactiveTabPane,
         defaultActiveKey,
         type,
-        onTabClick: this.onTabClick,
       },
       on: {
-        change (val) {
+        change: this.handleChange,
-          self.handleChange(val)
+        tabClick: this.onTabClick,
-        },
       },
     }
     if (hasProp(this, 'activeKey')) {

components/tabs/src/ScrollableInkTabBar.vue

@@ -2,10 +2,11 @@
 import InkTabBarMixin from './InkTabBarMixin'
 import ScrollableTabBarMixin from './ScrollableTabBarMixin'
 import TabBarMixin from './TabBarMixin'
+import BaseMixin from '../../_util/BaseMixin'
 
 export default {
   name: 'ScrollableInkTabBar',
-  mixins: [TabBarMixin, InkTabBarMixin, ScrollableTabBarMixin],
+  mixins: [TabBarMixin, InkTabBarMixin, ScrollableTabBarMixin, BaseMixin],
   render (h) {
     const inkBarNode = this.getInkBarNode()
     const tabs = this.getTabs(h)

components/tabs/src/ScrollableTabBar.vue

@@ -1,10 +1,11 @@
 <script>
 import ScrollableTabBarMixin from './ScrollableTabBarMixin'
 import TabBarMixin from './TabBarMixin'
+import BaseMixin from '../../_util/BaseMixin'
 
 export default {
   name: 'ScrollableTabBar',
-  mixins: [TabBarMixin, ScrollableTabBarMixin],
+  mixins: [TabBarMixin, ScrollableTabBarMixin, BaseMixin],
   render (h) {
     const inkBarNode = this.getInkBarNode()
     const tabs = this.getTabs(h)

components/tabs/src/ScrollableTabBarMixin.js

@@ -6,8 +6,6 @@ function noop () {
 export default {
   props: {
     scrollAnimated: { type: Boolean, default: true },
-    onPrevClick: { type: Function, default: noop },
-    onNextClick: { type: Function, default: noop },
   },
 
   data () {
@@ -201,7 +199,7 @@ export default {
     },
 
     prevClick (e) {
-      this.$props.onPrevClick(e)
+      this.__emit('prevClick', e)
       const navWrapNode = this.$refs.navWrap
       const navWrapNodeWH = this.getOffsetWH(navWrapNode)
       const { offset } = this
@@ -209,7 +207,7 @@ export default {
     },
 
     nextClick (e) {
-      this.$props.onNextClick(e)
+      this.__emit('nextClick', e)
       const navWrapNode = this.$refs.navWrap
       const navWrapNodeWH = this.getOffsetWH(navWrapNode)
       const { offset } = this

components/tabs/src/TabBar.vue

@@ -1,9 +1,8 @@
 <script>
 import TabBarMixin from './TabBarMixin'
-function noop () {
+import BaseMixin from '../../_util/BaseMixin'
-}
 export default {
-  mixins: [TabBarMixin],
+  mixins: [TabBarMixin, BaseMixin],
   name: 'TabBar',
   props: {
     prefixCls: {
@@ -15,14 +14,6 @@ export default {
       type: String,
     },
     disabled: Boolean,
-    onKeyDown: {
-      default: noop,
-      type: Function,
-    },
-    onTabClick: {
-      default: noop,
-      type: Function,
-    },
     activeKey: String,
     panels: Array,
   },

components/tabs/src/TabBarMixin.js

@@ -1,4 +1,4 @@
-import Icon from '../icon'
+import Icon from '../../icon'
 function noop () {
 }
 export default {
@@ -12,14 +12,6 @@ export default {
       type: String,
     },
     disabled: Boolean,
-    onKeyDown: {
-      default: noop,
-      type: Function,
-    },
-    onTabClick: {
-      default: noop,
-      type: Function,
-    },
     activeKey: String,
     panels: Array,
     hideAdd: Boolean,
@@ -51,7 +43,7 @@ export default {
         } else {
         }
         const onClick = () => {
-          !disabled && this.onTabClick(tabKey)
+          !disabled && this.__emit('tabClick', tabKey)
         }
 
         let tabC = typeof tab === 'function' ? child.tab(h, tabKey) : tab
@@ -86,6 +78,9 @@ export default {
 
       return rst
     },
+    onKeyDown (e) {
+      this.__emit('keydown', e)
+    },
     getRootNode (contents, createElement) {
       const {
         prefixCls, onKeyDown, tabBarPosition, hideAdd,

components/tabs/src/Tabs.vue

@@ -1,9 +1,10 @@
 <script>
-import Icon from '../icon'
+import Icon from '../../icon'
 import KeyCode from './KeyCode'
 import TabContent from './TabContent'
 import ScrollableInkTabBar from './ScrollableInkTabBar'
-import hasProp from '../_util/props-util'
+import hasProp from '../../_util/props-util'
+import BaseMixin from '../../_util/BaseMixin'
 function getDefaultActiveKey (t) {
   let activeKey
   t.$slots.default && t.$slots.default.forEach(({ componentOptions = {}, key: tabKey }) => {
@@ -23,8 +24,7 @@ function activeKeyIsValid (t, key) {
   })
   return key !== undefined && keys.indexOf(key) >= 0
 }
-function noop () {
+
-}
 export default {
   name: 'Tabs',
   components: { Icon },
@@ -32,6 +32,7 @@ export default {
     prop: 'activeKey',
     event: 'change',
   },
+  mixins: [BaseMixin],
   props: {
     prefixCls: {
       default: 'ant-tabs',
@@ -53,8 +54,6 @@ export default {
         return ['line', 'card', 'editable-card'].includes(value)
       },
     },
-    onChange: { type: Function, default: noop },
-    onTabClick: { type: Function, default: noop },
   },
   data () {
     return {
@@ -90,7 +89,7 @@ export default {
       return activeKey
     },
     handleTabClick (activeKey) {
-      this.onTabClick(activeKey)
+      this.__emit('tabClick', activeKey)
       this.setActiveKey(activeKey)
     },
 
@@ -112,7 +111,7 @@ export default {
         if (!hasProp(this, 'activeKey')) {
           this.stateActiveKey = activeKey
         }
-        this.onChange(activeKey)
+        this.__emit('change', activeKey)
       }
     },
 
@@ -172,25 +171,31 @@ export default {
     })
     const tabContentProps = {
       props: {
-        ...this.tabContentProps,
+        ...this.tabContentProps.props,
         prefixCls,
         tabBarPosition,
         activeKey: stateActiveKey,
         destroyInactiveTabPane,
-        onChange: setActiveKey,
+        // onChange: setActiveKey,
+      },
+      on: {
+        change: setActiveKey,
       },
     }
     const tabBarProps = {
       props: {
-        ...this.tabBarProps,
+        ...this.tabBarProps.props,
         panels: panels,
         prefixCls: prefixCls,
-        onKeyDown: onNavKeyDown,
         tabBarPosition: tabBarPosition,
-        onTabClick: handleTabClick,
         activeKey: stateActiveKey,
       },
       style: this.tabBarProps.style || {},
+      on: {
+        ...this.tabBarProps.on,
+        keydown: onNavKeyDown,
+        tabClick: handleTabClick,
+      },
     }
     const contents = [
       <ScrollableInkTabBar