Vue.js标签页组件采用TabContainer与TabPane父子分工，通过v-if+keep-alive保持状态，支持增删切换、快捷键及可访问性设计。
<p>用 Vue.js 实现一个标签页组件，核心是管理标签的增删、切换和内容渲染，同时保持状态不丢失。下面是一个轻量、可复用、带基础交互的实现方案。</p>
<H3>结构设计：父子组件分工明确</H3>
<p>拆分为两个组件更清晰：<strong>TabContainer</strong>（容器，负责标签列表和激活逻辑）和 <strong>TabPane</strong>（单个标签页，只负责内容展示）。父组件通过插槽或 props 传递内容，子组件用 <code>v-model</code> 或事件通知激活变化。</p>
<ul>
<li><strong>TabContainer</strong> 管理所有标签数据（如 <code>tabs: [{ id, title, closable, disabled }]</code>）、当前激活的 <code>activeId</code>，以及添加/关闭/切换方法</li>
<li><strong>TabPane</strong> 接收 <code>name</code>（对应 tab.id）和 <code>title</code>，内部用 <code>v-if</code> 控制是否渲染内容，避免销毁重建（保留状态）</li>
</ul>
<H3>状态保持：用 v-if 而非 v-show</H3>
<p>切换标签时，若用 <code>v-show</code>，所有标签内容始终在 DOM 中；但若想节省资源又保留状态（比如表单输入、滚动位置），推荐用 <code>v-if</code> + <strong>keep-alive</strong>：</p>
<ul>
<li>给 <code><tab-pane></code> 外层包裹 <code><keep-alive :include="activeTabNames"></code></li>
<li>或直接在 <code>TabPane</code> 内部用 <code><keep-alive></code> 包裹插槽内容</li>
<li>注意：keep-alive 的 <code>include</code> 需动态更新，建议用 computed 返回当前激活及已访问过的 tab id 列表</li>
</ul>
<H3>交互细节：关闭、新增、快捷键支持</H3>
<p>用户操作需反馈及时且符合直觉：</p>
<ul>
<li>点击关闭按钮触发 <code>removeTab(id)</code>，若当前关闭的是激活项，自动激活前一个（或后一个）标签</li>
<li>提供「+」按钮调用 <code>addTab({ title: '新标签', content: '...' })</code>，默认设为激活态</li>
<li>支持键盘操作：Ctrl/Cmd + W 关闭当前页，Ctrl/Cmd + Tab 切换（用 <code>@keydown</code> 监听并阻止默认行为）</li>
<li>右键标签可弹出菜单（关闭当前、关闭其他、关闭全部），用原生 <code>contextmenu</code> 事件 + 自定义菜单组件</li>
</ul>
<H3>样式与可访问性：简单但必要</H3>
<p>无需复杂 UI 框架，纯 CSS 即可支撑基础体验：</p>
<ul>
<li>标签栏用 flex 布局，<code>overflow-x: auto</code> 支持横向滚动（小屏适配）</li>
<li>激活态加 <code>aria-selected="true"</code> 和 <code>tabindex="0"</code>，支持键盘聚焦</li>
<li>关闭按钮用 <code><button type="button" aria-label="关闭标签"></code>，确保屏幕阅读器识别</li>
<li>禁用标签添加 <code>aria-disabled="true"</code> 并视觉灰化</li>
</ul>
