Merge branch 'dev' into next

src/tabbar/README.md

@@ -161,6 +161,7 @@ export default {
 | route | Whether to enable route mode | _boolean_ | `false` |
 | placeholder `v2.6.0` | Whether to generage a placeholder element when fixed | _boolean_ | `false` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `false` |
+| before-change `v2.10.4` | Callback function before changing tabs，return `false` to prevent change，support return Promise | _(name) => boolean \| Promise_ | - |
 
 ### Tabbar Events
 

src/tabbar/README.zh-CN.md

@@ -169,6 +169,7 @@ export default {
 | route | 是否开启路由模式 | _boolean_ | `false` |
 | placeholder `v2.6.0` | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei)，设置 fixed 时默认开启 | _boolean_ | `false` |
+| before-change `v2.10.4` | 切换标签前的回调函数，返回 `false` 可阻止切换，支持返回 Promise | _(name) => boolean \| Promise_ | - |
 
 ### Tabbar Events
 

src/tabbar/index.js

@@ -1,6 +1,7 @@
 import { ref, reactive, provide } from 'vue';
 import { createNamespace, isDef } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
+import { callInterceptor } from '../utils/interceptor';
 import { useHeight } from '../composition/use-rect';
 
 const [createComponent, bem] = createNamespace('tabbar');
@@ -13,6 +14,7 @@ export default createComponent({
     zIndex: [Number, String],
     placeholder: Boolean,
     activeColor: String,
+    beforeChange: Function,
     inactiveColor: String,
     modelValue: {
       type: [Number, String],
@@ -63,8 +65,14 @@ export default createComponent({
 
     const setActive = (active) => {
       if (active !== props.modelValue) {
-        emit('update:modelValue', active);
-        emit('change', active);
+        callInterceptor({
+          interceptor: props.beforeChange,
+          args: [active],
+          done() {
+            emit('update:modelValue', active);
+            emit('change', active);
+          },
+        });
       }
     };