fix(tabs): 修复 disabled 情况下能滑动过去的问题(jd-opensource#2486) (jd-opensource…

…#2559)
tiny-dust · Oct 9, 2023 · ec8504f · ec8504f
1 parent 6d0d7aa
commit ec8504f
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/src/packages/__VUE/tabs/__tests__/index.spec.tsx b/src/packages/__VUE/tabs/__tests__/index.spec.tsx
@@ -166,6 +166,37 @@ test('base Tabpane Props', async () => {
   expect(tab3[0].html()).toContain('Tab 1');
 });
 
+test('base Tabpane disabled swipeable', async () => {
+  const wrapper = mount({
+    components: {
+      'nut-tabs': Tabs,
+      'nut-tab-pane': TabPane
+    },
+    template: `
+    <nut-tabs v-model="state.tab2value" swipeable>
+      <nut-tab-pane title="Tab 1" pane-key="0"> </nut-tab-pane>
+      <nut-tab-pane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tab-pane>
+      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
+    </nut-tabs>
+    `,
+    setup() {
+      const state = reactive({
+        tab2value: '0'
+      });
+      return { state };
+    }
+  });
+  await nextTick();
+  const tab = wrapper.findAll('.nut-tabs__titles-item');
+  expect(tab.length).toBe(3);
+  const tab1 = wrapper.findAll('.nut-tabs__titles-item')[1];
+  expect(tab1.classes()).toContain('disabled');
+  const tab2 = wrapper.findAll('.nut-tabs__titles-item')[0];
+  expect(tab2.classes()).toContain('active');
+  const tab3 = wrapper.findAll('.nut-tabs__titles-item__text');
+  expect(tab3[0].html()).toContain('Tab 1');
+});
+
 test('base click', async () => {
   const wrapper = mount({
     components: {

diff --git a/src/packages/__VUE/tabs/index.vue b/src/packages/__VUE/tabs/index.vue
@@ -293,10 +293,28 @@ export default create({
       },
       next: () => {
         currentIndex.value += 1;
+        const nextDisabled = titles.value[currentIndex.value].disabled;
+        if (tabMethods.isEnd() && nextDisabled) {
+          tabMethods.prev();
+          return;
+        }
+        if (nextDisabled && currentIndex.value < titles.value.length - 1) {
+          tabMethods.next();
+          return;
+        }
         tabMethods.updateValue(titles.value[currentIndex.value]);
       },
       prev: () => {
         currentIndex.value -= 1;
+        const prevDisabled = titles.value[currentIndex.value].disabled;
+        if (tabMethods.isBegin() && prevDisabled) {
+          tabMethods.next();
+          return;
+        }
+        if (prevDisabled && currentIndex.value > 0) {
+          tabMethods.prev();
+          return;
+        }
         tabMethods.updateValue(titles.value[currentIndex.value]);
       },
       updateValue: (item: Title) => {