feat(Tabs): add before-change prop (#6817)

src/tabs/index.js

@@ -1,5 +1,5 @@
 // Utils
-import { createNamespace, isDef, addUnit } from '../utils';
+import { createNamespace, isDef, addUnit, isPromise } from '../utils';
 import { scrollLeftTo, scrollTopTo } from './utils';
 import { route } from '../utils/router';
 import { isHidden } from '../utils/dom/style';
@@ -53,6 +53,7 @@ export default createComponent({
     background: String,
     lineWidth: [Number, String],
     lineHeight: [Number, String],
+    beforeChange: Function,
     titleActiveColor: String,
     titleInactiveColor: String,
     type: {
@@ -266,14 +267,34 @@ export default createComponent({
       }
     },
 
+    callBeforeChange(name, done) {
+      if (this.beforeChange) {
+        const returnVal = this.beforeChange(name);
+
+        if (isPromise(returnVal)) {
+          returnVal.then((value) => {
+            if (value) {
+              done();
+            }
+          });
+        } else if (returnVal) {
+          done();
+        }
+      } else {
+        done();
+      }
+    },
+
     // emit event when clicked
     onClick(item, index) {
       const { title, disabled, computedName } = this.children[index];
       if (disabled) {
         this.$emit('disabled', computedName, title);
       } else {
-        this.setCurrentIndex(index);
-        this.scrollToCurrentContent();
+        this.callBeforeChange(computedName, () => {
+          this.setCurrentIndex(index);
+          this.scrollToCurrentContent();
+        });
         this.$emit('click', computedName, title);
         route(item.$router, item);
       }