fix: 修复 Tabbar 选中问题

DvShu · Jul 3, 2024 · 3118f98 · 3118f98
1 parent ab58315
commit 3118f98
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 30 deletions.
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
@@ -32,7 +32,8 @@ jobs:
       - name: Check event type
         id: check_event
         run: |
-          echo "Event: ${{ toJson(env) }}"
+          echo "EventName: ${{ github.event_name }}"
+          echo "HeadRef": ${{ github.head_ref }}"
 
       - uses: googleapis/release-please-action@v4
         id: release

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,38 +2,50 @@
 
 ## [0.9.0](https://github.com/DvShu/neatui-vue/compare/v0.8.1...v0.9.0) (2024-07-03)
 
-
 ### Features
 
-* **Loading:** 新增加载指令 ([e591c5f](https://github.com/DvShu/neatui-vue/commit/e591c5f1b039b9051a29925a3aa58184f313f517))
-
+- **Loading:** 新增加载指令 ([e591c5f](https://github.com/DvShu/neatui-vue/commit/e591c5f1b039b9051a29925a3aa58184f313f517))
 
 ### Bug Fixes
 
-* 移除 LoadingBar 组件 ([e591c5f](https://github.com/DvShu/neatui-vue/commit/e591c5f1b039b9051a29925a3aa58184f313f517))
+- 移除 LoadingBar 组件 ([e591c5f](https://github.com/DvShu/neatui-vue/commit/e591c5f1b039b9051a29925a3aa58184f313f517))
 
 ## [0.8.1](https://github.com/DvShu/neatui-vue/compare/v0.8.0...v0.8.1) (2024-07-02)
 
-
 ### Bug Fixes
 
-* **TabbarItem:** 优化 name 类型 ([7d39889](https://github.com/DvShu/neatui-vue/commit/7d39889f391c4b55b0277a8eae3db8d8b1f57658))
-* **Tabbar:** Tabbar默认白色背景 ([7d39889](https://github.com/DvShu/neatui-vue/commit/7d39889f391c4b55b0277a8eae3db8d8b1f57658))
+- **TabbarItem:** 优化 name 类型 ([7d39889](https://github.com/DvShu/neatui-vue/commit/7d39889f391c4b55b0277a8eae3db8d8b1f57658))
+- **Tabbar:** Tabbar默认白色背景 ([7d39889](https://github.com/DvShu/neatui-vue/commit/7d39889f391c4b55b0277a8eae3db8d8b1f57658))
 
 ## [0.8.0](https://github.com/DvShu/neatui-vue/compare/v0.7.1...v0.8.0) (2024-07-01)
 
+### Features
+
+- **Loading:** 新增加载指令 ([e591c5f](https://github.com/DvShu/neatui-vue/commit/e591c5f1b039b9051a29925a3aa58184f313f517))
+
+### Bug Fixes
+
+- 移除 LoadingBar 组件 ([e591c5f](https://github.com/DvShu/neatui-vue/commit/e591c5f1b039b9051a29925a3aa58184f313f517))
+
+## [0.8.1](https://github.com/DvShu/neatui-vue/compare/v0.8.0...v0.8.1) (2024-07-02)
+
+### Bug Fixes
+
+- **TabbarItem:** 优化 name 类型 ([7d39889](https://github.com/DvShu/neatui-vue/commit/7d39889f391c4b55b0277a8eae3db8d8b1f57658))
+- **Tabbar:** Tabbar默认白色背景 ([7d39889](https://github.com/DvShu/neatui-vue/commit/7d39889f391c4b55b0277a8eae3db8d8b1f57658))
+
+## [0.8.0](https://github.com/DvShu/neatui-vue/compare/v0.7.1...v0.8.0) (2024-07-01)
 
 ### Features
 
-* 新增 tabbar 选项卡组件 ([a85565a](https://github.com/DvShu/neatui-vue/commit/a85565a13b228ad644c38f2681acd4eec8ed3a3b))
-* 新增 tabs 标签页样式 ([a85565a](https://github.com/DvShu/neatui-vue/commit/a85565a13b228ad644c38f2681acd4eec8ed3a3b))
+- 新增 tabbar 选项卡组件 ([a85565a](https://github.com/DvShu/neatui-vue/commit/a85565a13b228ad644c38f2681acd4eec8ed3a3b))
+- 新增 tabs 标签页样式 ([a85565a](https://github.com/DvShu/neatui-vue/commit/a85565a13b228ad644c38f2681acd4eec8ed3a3b))
 
 ## [0.7.1](https://github.com/DvShu/neatui-vue/compare/v0.7.0...v0.7.1) (2024-06-26)
 
-
 ### Bug Fixes
 
-* **DescriptionPanel:** 修复简介面板不能正确隐藏展开按钮 ([7d74c2a](https://github.com/DvShu/neatui-vue/commit/7d74c2a8311ce3c20f34aea8d88f45c1c5f65611))
+- **DescriptionPanel:** 修复简介面板不能正确隐藏展开按钮 ([7d74c2a](https://github.com/DvShu/neatui-vue/commit/7d74c2a8311ce3c20f34aea8d88f45c1c5f65611))
 
 ## [0.7.0](https://github.com/DvShu/neatui-vue/compare/v0.6.5...v0.7.0) (2024-06-26)
 

diff --git a/src/components/tabbar/Tabbar.vue b/src/components/tabbar/Tabbar.vue
@@ -19,7 +19,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, provide, ref } from 'vue';
+import { computed, onMounted, provide, ref, watch, nextTick } from 'vue';
 import { tabbarContext } from './constant';
 import { isVisible, elem } from 'ph-utils/dom';
 
@@ -67,33 +67,41 @@ const styles = computed(() => {
 });
 
 function calcItemPos(name: string) {
-  if (Rel.value != null) {
-    const $target = elem(
-      '.nt-tabbar-item[data-name="' + name + '"]',
-      Rel.value,
-    )[0];
-    const offsetLeft = $target.offsetLeft;
-    lineStyles.value = {
-      width: $target.offsetWidth + 'px',
-      left: `${offsetLeft}px`,
-    };
+  nextTick(() => {
     if (Rel.value != null) {
-      if (!isVisible($target, Rel.value)) {
-        Rel.value.scrollTo({
-          left: offsetLeft,
-          behavior: 'smooth',
-        });
+      const $target = elem(
+        '.nt-tabbar-item[data-name="' + name + '"]',
+        Rel.value,
+      )[0];
+      if ($target != null) {
+        const offsetLeft = $target.offsetLeft;
+        lineStyles.value = {
+          width: $target.offsetWidth + 'px',
+          left: `${offsetLeft}px`,
+        };
+        if (!isVisible($target, Rel.value)) {
+          Rel.value.scrollTo({
+            left: offsetLeft,
+            behavior: 'smooth',
+          });
+        }
       }
     }
-  }
+  });
 }
 
 function change(name: string | number) {
   model.value = name;
-  calcItemPos(String(name));
   emits('change', name);
 }
 
+watch(
+  () => model.value,
+  (val) => {
+    calcItemPos(String(val));
+  },
+);
+
 provide(tabbarContext, {
   active: model,
   change,