vdesign-ui 0.2.13 → 0.2.15

package/dist/components/tabs/index.vue

@@ -208,44 +208,61 @@ export default {
       if (tab.disabled) {
         this.$emit('disabled', tab.name !== undefined ? tab.name : index, index);
       } else {
-        this.currentName = tab.name !== undefined ? tab.name : index;
-        // 如果 currentName 是索引值，确保为数字类型
-        if (tab.name === undefined) {
-          this.currentName = Number(this.currentName);
+        const newName = tab.name !== undefined ? tab.name : index;
+
+        // 始终触发 click 事件
+        this.$emit('click', newName, index);
+
+        // 检查是否需要切换标签
+        if (newName !== this.currentName) {
+          this.currentName = newName;
+          
+          // 如果 currentName 是索引值，确保为数字类型
+          if (tab.name === undefined) {
+            this.currentName = Number(this.currentName);
+          }
+
+          this.$emit('input', this.currentName);
+          this.$emit('change', this.currentName, index); // 仅在切换时触发 change 事件
+
+          // 切换标签后，滚动到当前标签
+          this.$nextTick(() => {
+            this.scrollToActiveTab();
+          });
         }
-        this.$emit('input', this.currentName);
-        this.$emit('change', this.currentName, index);
-        // 切换标签后，滚动到当前标签
-        this.$nextTick(() => {
-          this.scrollToActiveTab();
-        });
       }
     },
-    scrollToActiveTab() {
-        const scrollWrapper = this.$refs.nav; // 修改这里
-        const tabItems = this.$refs.tabItems;
-
-        if (!scrollWrapper || !tabItems || tabItems.length === 0) {
+    scrollToActiveTab(targetIndex = null) {
+      const scrollWrapper = this.$refs.nav; 
+      const tabItems = this.$refs.tabItems;
+      if (!scrollWrapper || !tabItems || tabItems.length === 0) {
+        return;
+      }
+      // 如果传入 targetIndex，设置当前激活标签的 name
+      if (targetIndex !== null) {
+        const targetTab = this.tabs[targetIndex];
+        if (targetTab) {
+          this.currentName = targetTab.name !== undefined ? targetTab.name : targetIndex;
+        } else {
+          console.warn('Invalid target index:', targetIndex);
           return;
         }
+      }
 
-        const activeIndex = this.tabs.findIndex((tab, index) => {
-          return this.isTabActive(tab, index);
-        });
-
-        const activeTab = tabItems[activeIndex];
-
-        if (activeTab) {
-          const tabOffsetLeft = activeTab.offsetLeft;
-          const tabWidth = activeTab.offsetWidth;
-          const wrapperWidth = scrollWrapper.offsetWidth;
-          const scrollLeft = tabOffsetLeft - (wrapperWidth - tabWidth) / 2;
+      const activeIndex = targetIndex !== null ? targetIndex : this.tabs.findIndex((tab, index) => this.isTabActive(tab, index));
+      const activeTab = tabItems[activeIndex];
 
-          scrollWrapper.scrollTo({
-            left: scrollLeft,
-            behavior: 'smooth',
-          });
-        }
+      setTimeout(() => {
+        const tabOffsetLeft = activeTab.offsetLeft;
+        const tabWidth = activeTab.offsetWidth;
+        const wrapperWidth = scrollWrapper.offsetWidth;
+        const scrollLeft = tabOffsetLeft - (wrapperWidth - tabWidth) / 2;
+    
+        scrollWrapper.scrollTo({
+          left: scrollLeft,
+          behavior: 'smooth'
+        });
+      }, 0); // You can adjust the timeout value if needed
     },
     renderTitle(titleEl, tab) {
       this.$nextTick(() => {
@@ -261,6 +278,26 @@ export default {
         }
       });
     },
+    /**
+     * resize 方法
+     * 当外层元素大小或组件显示状态变化时调用，触发重绘
+    */
+    resize() {
+      // 重新计算当前激活标签的位置
+      this.scrollToActiveTab();
+      // 如果有其他需要重绘或重新计算的逻辑，可以在这里添加
+      // 例如，重新计算动画轨道的位置等
+    },
+    /**
+     * scrollTo 方法
+     * 刷新页面，滚动到指定位置
+    */
+    scrollTo(targetIndex = null){
+      // 重新计算当前激活标签的位置
+      this.scrollToActiveTab(targetIndex);
+      // 如果有其他需要重绘或重新计算的逻辑，可以在这里添加
+      // 例如，重新计算动画轨道的位置等
+    }
   },
   mounted() {
     if (this.currentName !== undefined) {
@@ -271,10 +308,10 @@ export default {
     }
     // 初始加载时，滚动到当前激活的标签
     this.$nextTick(() => {
-        this.scrollToActiveTab();
-      });
-    },
-  };
+      this.scrollToActiveTab();
+    });
+  },
+};
 </script>
 <style lang="less">
 @import "./style.less";