vue 实现 tag导航过多

处理 Vue 中 Tag 导航过多的问题

当 Vue 项目中 Tag 导航数量过多时，可能会导致界面拥挤或性能问题。以下是几种常见的解决方案：

滚动容器方案

将 Tag 导航放入一个横向滚动的容器中，允许用户通过滚动查看所有标签。这种方式适合标签数量较多但不需要频繁操作的情况。

<div class="tag-container" ref="tagContainer">
  <div class="tag-list" ref="tagList">
    <span v-for="tag in tags" :key="tag.id" class="tag-item">
      {{ tag.name }}
    </span>
  </div>
</div>

.tag-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
.tag-item {
  display: inline-block;
  margin-right: 8px;
  padding: 4px 8px;
  background: #eee;
  border-radius: 4px;
}

折叠菜单方案

当标签数量超过一定阈值时，将部分标签折叠到下拉菜单中。

<div class="tag-wrapper">
  <span 
    v-for="(tag, index) in visibleTags" 
    :key="tag.id" 
    class="tag-item"
  >
    {{ tag.name }}
  </span>

  <el-dropdown v-if="hiddenTags.length > 0">
    <span class="tag-item">
      更多 <i class="el-icon-arrow-down"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item 
        v-for="tag in hiddenTags" 
        :key="tag.id"
      >
        {{ tag.name }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>

computed: {
  visibleTags() {
    return this.tags.slice(0, this.maxVisible);
  },
  hiddenTags() {
    return this.tags.slice(this.maxVisible);
  }
}

分页方案

为标签导航添加分页功能，适合标签数量非常多的情况。

<div class="tag-pagination">
  <div class="tag-page">
    <span 
      v-for="tag in currentPageTags" 
      :key="tag.id" 
      class="tag-item"
    >
      {{ tag.name }}
    </span>
  </div>

  <el-pagination
    small
    layout="prev, pager, next"
    :total="tags.length"
    :page-size="pageSize"
    @current-change="handlePageChange"
  />
</div>

data() {
  return {
    currentPage: 1,
    pageSize: 10
  }
},
computed: {
  currentPageTags() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.tags.slice(start, end);
  }
},
methods: {
  handlePageChange(page) {
    this.currentPage = page;
  }
}

自适应宽度方案

动态计算容器宽度，根据可用空间显示尽可能多的标签。

mounted() {
  this.calculateVisibleTags();
  window.addEventListener('resize', this.calculateVisibleTags);
},
beforeDestroy() {
  window.removeEventListener('resize', this.calculateVisibleTags);
},
methods: {
  calculateVisibleTags() {
    const containerWidth = this.$refs.container.offsetWidth;
    let totalWidth = 0;
    const visibleTags = [];

    for (const tag of this.tags) {
      const tagWidth = /* 计算单个标签宽度 */;
      if (totalWidth + tagWidth <= containerWidth) {
        visibleTags.push(tag);
        totalWidth += tagWidth;
      } else {
        break;
      }
    }

    this.visibleTags = visibleTags;
    this.hiddenTags = this.tags.slice(visibleTags.length);
  }
}

性能优化建议

对于大量标签渲染，使用虚拟滚动技术优化性能。

<virtual-list
  :size="50"
  :remain="10"
  :data-key="'id'"
  :data-sources="tags"
>
  <template v-slot="{ source }">
    <span class="tag-item">
      {{ source.name }}
    </span>
  </template>
</virtual-list>

使用第三方库如 vue-virtual-scroller 实现虚拟滚动，减少 DOM 节点数量，提高渲染性能。