优化头部标签卡

hejianhao

2025-04-01 f3d18d3413b2d5f90457588017e1c535a06e4d26

优化头部标签卡

 src/layouts/components/HeaderNav.vue

@@ -6,7 +6,7 @@
        <!-- 折叠 -->
        <i @click="clickFold" class="el-icon-s-fold"></i>
        <!-- 标签列表 -->
        <div class="tag-list-container">
        <div class="tag-list-container" @wheel.prevent="handleWheel">
          <div class="tag-list" v-for="tag in tagList" :key="tag.name">
            <div @click="goTag(tag)" :class="{ 'activeTag': tag.path === $route.path }">
              {{ tag.meta.title }}
@@ -34,6 +34,8 @@
  data() {
    return {
      userInfo: '',
      scrollTimer: null,
      scrollAmount: 0
    }
  },
  computed: {
@@ -72,6 +74,23 @@
    // 跳转标签
    goTag(tag) {
      this.$router.push(tag.path)
    },
    handleWheel(e) {
      if (this.scrollTimer) {
        this.scrollAmount += e.deltaY;
        return;
      }
      
      const container = e.currentTarget;
      this.scrollAmount = e.deltaY;
      
      const scroll = () => {
        container.scrollLeft += this.scrollAmount * 1.2; // 增加滚动速度
        this.scrollAmount = 0;
        this.scrollTimer = null;
      };
      
      this.scrollTimer = setTimeout(scroll, 8); // 减少延迟时间
    }
  },
}
@@ -86,13 +105,15 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;

  .user-logininfo-icon {
    margin-right: 30px;
    flex: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;

    i:first-child {
      margin-right: 21px;
@@ -106,6 +127,10 @@
      display: flex;
      align-items: center;
      overflow-x: auto;
      flex: 1;
      min-width: 0;
      scroll-behavior: auto; // 移除平滑滚动，提高性能
      -webkit-overflow-scrolling: touch;

      .tag-list {
        flex-shrink: 0;