如何基于div元素创建带全宽子项行的类选项卡组件？

核心思路 #

通过Flex布局控制行内元素宽度，结合状态管理控制子项行的显示/隐藏，确保全宽子项占满父容器宽度。

代码实现 #

模板结构

<template>
  <div class="tab-container">
    <!-- 第一组：4个可点击项 -->
    <div class="item-row">
      <div class="item" @click="toggleSub('sub1')">项目1</div>
      <div class="item" @click="toggleSub('sub2')">项目2</div>
      <div class="item" @click="toggleSub('sub3')">项目3</div>
      <div class="item" @click="toggleSub('sub4')">项目4</div>
    </div>
    <!-- 全宽子项行：点击对应项时显示 -->
    <div v-if="activeSub === 'sub1'" class="full-width-sub">子项内容1（全宽）</div>
    <div v-if="activeSub === 'sub2'" class="full-width-sub">子项内容2（全宽）</div>
    <div v-if="activeSub === 'sub3'" class="full-width-sub">子项内容3（全宽）</div>
    <div v-if="activeSub === 'sub4'" class="full-width-sub">子项内容4（全宽）</div>

    <!-- 第二组：4个可点击项 -->
    <div class="item-row">
      <div class="item" @click="toggleSub('sub5')">项目5</div>
      <div class="item" @click="toggleSub('sub6')">项目6</div>
      <div class="item" @click="toggleSub('sub7')">项目7</div>
      <div class="item" @click="toggleSub('sub8')">项目8</div>
    </div>
    <!-- 第二组对应的全宽子项行 -->
    <div v-if="activeSub === 'sub5'" class="full-width-sub">子项内容5（全宽）</div>
    <div v-if="activeSub === 'sub6'" class="full-width-sub">子项内容6（全宽）</div>
    <div v-if="activeSub === 'sub7'" class="full-width-sub">子项内容7（全宽）</div>
    <div v-if="activeSub === 'sub8'" class="full-width-sub">子项内容8（全宽）</div>
  </div>
</template>

脚本部分

<script setup>
import { ref } from 'vue'

// 记录当前激活的子项
const activeSub = ref(null)

// 切换子项显示状态
const toggleSub = (subId) => {
  activeSub.value = activeSub.value === subId ? null : subId
}
</script>

样式部分

<style scoped>
.tab-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 4项行：使用flex平分宽度 */
.item-row {
  display: flex;
  gap: 8px; /* 项之间的间距 */
  margin-bottom: 12px;
}

.item {
  flex: 1; /* 每个项平分父容器宽度 */
  padding: 12px;
  background-color: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s;
}

.item:hover {
  background-color: #e0e0e0;
}

/* 全宽子项行 */
.full-width-sub {
  width: 100%;
  padding: 20px;
  background-color: #e8f4f8;
  border-radius: 4px;
  margin-bottom: 12px;
}
</style>

关键要点 #

1. Flex布局分配宽度：item-row用display: flex，每个item设置flex: 1，自动平分父容器宽度，实现4项一行的效果。
2. 全宽子项控制：full-width-sub设置width: 100%，确保占满父容器宽度，通过v-if指令结合activeSub状态控制显示/隐藏。
3. 交互逻辑：点击项时切换activeSub的值，实现子项的显示/切换（再次点击可关闭）。

内容的提问来源于stack exchange，提问作者baseci