fix: tabs next arrow not work

antdv-demo

@@ -1 +1 @@
-Subproject commit be6191e05ba4d7fc25413373659aaed84eb4c6d7
+Subproject commit 7c35d4f5f4ab0ea204cf944ef70e8705f41c7c3f

components/tabs/__tests__/__snapshots__/index.test.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tabs tabPosition remove card 1`] = `
-<div class="ant-tabs ant-tabs-left ant-tabs-vertical ant-tabs-line">
+<div class="ant-tabs-vertical ant-tabs-line ant-tabs ant-tabs-left">
-  <div role="tablist" tabindex="0" class="ant-tabs-bar ant-tabs-left-bar">
+  <div role="tablist" class="ant-tabs-bar ant-tabs-left-bar" tabindex="0">
-    <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><span role="img" aria-label="up" class="anticon anticon-up ant-tabs-tab-prev-icon-target"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><span role="img" aria-label="down" class="anticon anticon-down ant-tabs-tab-next-icon-target"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></span>
+    <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><span role="img" aria-label="up" class="anticon anticon-up ant-tabs-tab-prev-icon-target"><svg class="" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><span role="img" aria-label="down" class="anticon anticon-down ant-tabs-tab-next-icon-target"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></span>
       <div class="ant-tabs-nav-wrap">
         <div class="ant-tabs-nav-scroll">
           <div class="ant-tabs-nav ant-tabs-nav-animated">
@@ -17,12 +17,12 @@ exports[`Tabs tabPosition remove card 1`] = `
     </div>
     <div class="ant-tabs-extra-content">xxx</div>
   </div>
-  <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
+  <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
   <div class="ant-tabs-content ant-tabs-content-animated ant-tabs-left-content" style="margin-top: 0%;">
-    <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+    <div class="ant-tabs-tabpane ant-tabs-tabpane-active" role="tabpanel" aria-hidden="false">
-      <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>foo<div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
+      <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>foo<div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
     </div>
   </div>
-  <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
+  <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; position: absolute;" role="presentation"></div>
 </div>
 `;

components/tabs/tabs.jsx

@@ -36,6 +36,12 @@ export default {
     animated: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
     tabBarGutter: PropTypes.number,
     renderTabBar: PropTypes.func,
+    onChange: PropTypes.func,
+    onTabClick: PropTypes.func,
+    onPrevClick: PropTypes.func,
+    onNextClick: PropTypes.func,
+    onEdit: PropTypes.func,
+    'onUpdate:activeKey': PropTypes.func,
   },
   setup() {
     return {
@@ -63,15 +69,6 @@ export default {
     createNewTab(targetKey) {
       this.$emit('edit', targetKey, 'add');
     },
-    onTabClick(val) {
-      this.$emit('tabClick', val);
-    },
-    onPrevClick(val) {
-      this.$emit('prevClick', val);
-    },
-    onNextClick(val) {
-      this.$emit('nextClick', val);
-    },
   },
 
   render() {

components/vc-tabs/src/ScrollableTabBarNode.jsx

@@ -5,7 +5,6 @@ import BaseMixin from '../../_util/BaseMixin';
 import { getComponent, getSlot } from '../../_util/props-util';
 import { setTransform, isTransform3dSupported } from './utils';
 
-function noop() {}
 export default {
   name: 'ScrollableTabBarNode',
   mixins: [BaseMixin],
@@ -279,7 +278,7 @@ export default {
 
     const prevButton = (
       <span
-        onClick={prev ? this.prevClick : noop}
+        onClick={prev && this.prevClick}
         unselectable="unselectable"
         class={{
           [`${prefixCls}-tab-prev`]: 1,
@@ -294,7 +293,7 @@ export default {
 
     const nextButton = (
       <span
-        onClick={next ? this.nextClick : noop}
+        onClick={next && this.nextClick}
         unselectable="unselectable"
         class={{
           [`${prefixCls}-tab-next`]: 1,

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/select/demo/index';
+import demo from '../antdv-demo/docs/tabs/demo/index';
 
 export default {
   components: {