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

src/tab/test/__snapshots__/demo.spec.js.snap

@@ -318,5 +318,32 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-tabs van-tabs--line">
+      <div class="van-tabs__wrap van-hairline--top-bottom">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
+          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+        </div>
+      </div>
+      <div class="van-tabs__content">
+        <div role="tabpanel" class="van-tab__pane" style="">
+          内容 1
+        </div>
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+        <div role="tabpanel" class="van-tab__pane" style="display: none;">
+          <!---->
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

src/tab/test/index.spec.js

@@ -362,3 +362,51 @@ test('should not trigger rendered event when disable lazy-render', async () => {
   await later();
   expect(onRendered).toHaveBeenCalledTimes(0);
 });
+
+test('before-change prop', async () => {
+  const onChange = jest.fn();
+  const wrapper = mount({
+    template: `
+      <van-tabs @change="onChange" :before-change="beforeChange">
+        <van-tab title="title1">Text</van-tab>
+        <van-tab title="title2">Text</van-tab>
+        <van-tab title="title3">Text</van-tab>
+        <van-tab title="title4">Text</van-tab>
+        <van-tab title="title5">Text</van-tab>
+      </van-tabs>
+    `,
+    methods: {
+      onChange,
+      beforeChange(name) {
+        switch (name) {
+          case 1:
+            return false;
+          case 2:
+            return true;
+          case 3:
+            return Promise.resolve(false);
+          case 4:
+            return Promise.resolve(true);
+        }
+      },
+    },
+  });
+
+  await later();
+
+  const tabs = wrapper.findAll('.van-tab');
+  tabs.at(1).trigger('click');
+  expect(onChange).toHaveBeenCalledTimes(0);
+
+  tabs.at(2).trigger('click');
+  expect(onChange).toHaveBeenCalledTimes(1);
+  expect(onChange).toHaveBeenLastCalledWith(2, 'title3');
+
+  tabs.at(3).trigger('click');
+  expect(onChange).toHaveBeenCalledTimes(1);
+
+  tabs.at(4).trigger('click');
+  await later();
+  expect(onChange).toHaveBeenCalledTimes(2);
+  expect(onChange).toHaveBeenLastCalledWith(4, 'title5');
+});