n-vtabs 垂直选项卡
左侧竖向分类轨道 + 右侧滚动内容区：点轨道项切换当前项；联动模式下内容区滚动时高亮自动跟随，点轨道项内容区平滑滚到对应分区。适用于"左侧分类 + 右侧长内容"的分类页（外卖菜类、商品分类、帮助中心目录）。
- 右侧内容完全由页面插槽决定：每个分区用
n-vtabs-content包裹并传tabIndex（0 起连续编号，与轨道数据顺序一一对应），分区高度自动上报作为滚动定位依据linkage关闭后点选只切值不滚内容，内容展示由页面按change自行渲染（分区少而内容固定的页面更轻）width/height传 0 时组件撑满全屏（默认），适合整页分类页；嵌在卡片等局部容器时传具体 px 值- 分区高度自动监听并上报；图片加载、分页追加和内容重排无需调用者重测
- 轨道项字段与 n-tabs 的 item 同构（
label/value/icon/activeIcon/badge/disabled）；轨道项内容默认居中（对齐参考实现）；角标绝对定位于文字右上（位置与大小固定，同 n-tabs），语义同 n-tabs：数字 ≤0 不显示、>99 显示 "99+"，字符串原样显示，badge: true显示为红点。默认 52 高轨道对上探角标天然放行；压矮tabHeight后组件自动在轨道顶部预留徽标带（同 n-tabs）
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| list | 轨道数据源（label / value / disabled / badge / icon / activeIcon，与 n-tabs 的 item 同构）；列表内 value 需唯一 | Array<NTabsItem> | [] | - |
| model-value | 当前选中项的值（按 item.value 匹配，缺省值即下标；匹配不到回落第一项显示） | String | Number | 0 | - |
| width | 组件整体宽度（px），0 = 全屏宽 | Number | 0 | - |
| height | 组件整体高度（px），0 = 全屏高 | Number | 0 | - |
| tab-width | 轨道宽度（px） | Number | 96 | - |
| tab-height | 轨道项高度（px），触控目标即整项 | Number | 52 | - |
| linkage | 滚动联动：内容区滚动时高亮跟随、点轨道项内容区滚到对应分区；false 时点选只切值，内容展示由页面按 change 自行处理 | Boolean | true | - |
| animation | 点轨道项后内容区滚动是否带动画 | Boolean | true | - |
| color | 激活色：激活项文字与左侧指示竖条颜色；空串取品牌色主题令牌 | String | "" | 与 css 相同 |
| inactive-color | 未选中文字颜色；空串取主题文字令牌 | String | "" | - |
| background | 轨道底色：空串取主题次级面底色；传色值行内覆盖，支持 linear-gradient(...) 渐变串 | String | "" | 与 css 相同 |
| active-background | 激活项底色：空串取主题面底色（轨道用次级面底色时激活项呈"浮起"效果）；支持 linear-gradient(...) 渐变串 | String | "" | 与 css 相同 |
| border | 显示激活项左侧指示竖条 | Boolean | true | - |
| border-color | 指示竖条颜色：空串取激活色（color，再回落品牌色） | String | "" | 与 css 相同 |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式，如 "background-color:#ffffff" | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:model-value | 选中项变化时触发（点选或内容区滚动联动） | 选中项的值（item.value 缺省时为其下标） |
| change | 选中项变化时触发；点已选中项与禁用项不触发 | NVtabsEventDetail：{ item, index }（触发项数据与下标） |
| click | 点击可交互轨道项时触发（已选中项也触发） | NVtabsEventDetail： |
| scrollToLower | 内容区滚动到底时触发 | NVtabsEventDetail：{ item, index }（当前选中项） |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 右侧内容区：每个分区用 n-vtabs-content 包裹并传 tabIndex（0 起连续编号），分区高度自动上报作为滚动定位依据；内容完全由页面排版 |
方法（经 ref 调用）
| 方法 | 说明 |
|---|---|
| refresh | 立即重测全部分区高度的兼容入口；内容高度变化已由组件自动跟随 |
实现说明（参考做法对照）
分区高度由子件自行上报，避免跨样式隔离查询插槽节点：子件自动监听自身尺寸（Web 端 ResizeObserver / App 端 UniResizeObserver / 小程序端共用检测时钟），异步内容无需页面手动 refresh；首测锚定与点选定位由组件统一计算，前序分区高度变化时保留当前分区内的阅读位置。refresh() 保留为立即重测入口。
| 机制 | 参考做法（垂直选项卡参考源） | 本组件 | 分歧理由 |
|---|---|---|---|
| 数据模型 | list 对象数组 + nameKey/badgeKey/iconKey 等自定义取值键，另收字符串数组简写 | list 固定字段（label / value / badge / icon / activeIcon / disabled），与 n-tabs 的 item 同构 | 库内列表组件统一对象数组心智；取值键属页面数据适配职责，字符串归一页面一行 map 即得 |
| 选中值 | activeTab 只读初始（挂载后组件内自管） | modelValue 受控（update:modelValue + change 双通道，string/number 皆可） | 受控单源：外部状态可随时回写生效；只读初始后组件与页面出现双源失联 |
| 轨道几何 | tabWidth 220 / tabHeight 110 默认 | tabWidth 96 / tabHeight 52（0 不特殊，width/height 0 = 全屏） | 紧凑轨道让内容区拿到更多宽；52 是移动端触控目标下限，220 默认挤压右侧内容 |
| 字号字重 | size / activeSize / fontWeight / activeFontWeight 逐项可调 | 令牌统一（--n-vtabs-font-size 等），激活加粗为类样式 | 全局风格走主题令牌；逐项字号字重属个别定制，customClass 通道可达 |
| 配色命名 | color = 未选中色 / activeColor = 激活色 | color = 激活色 / inactiveColor = 未选中色 | 与 n-tabs 命名一致（color 即激活色），库内不出现同名反义 |
| 指示竖条 | isBorder + borderColor | border + borderColor（空串回落 color 再回落品牌色） | 竖条与激活文字同源，减少必填配置 |
| 角标 | badge 数字 + isDot 布尔两个通道 | badge 单通道三形态：number（≤0 不显示、>99 截 99+）/ string 原样 / true 红点 | 与 n-tabs 角标语义同构，一个字段表达三种形态 |
| 轨道回中 | scroll-into-view 滚到激活项 | scroll-top 最小滚动量（按 scroll 事件回传的实际位置判定，含同值归位重触发） | 已在视口内不扰动阅读上下文；实际位置跟踪消除手动滚动后的回中盲区 |
| 末分区可达 | 演示页给末分区手动 paddingBottom 800px 补高 | 滚动位置达上限时强制判定末项 | 组件内消化，不转嫁页面补高 |
| 分区高度协议 | content 挂载 300ms 延时 + 150ms debounce 上报一次 | useElementSize 三端尺寸监听实时上报（含后续变化） | 延时与 debounce 是无监听手段的代偿；实时监听天然覆盖图片加载与分页追加 |
| scrolltolower | 仅非联动模式触发 | 联动 / 非联动均触发 | 事件语义与 linkage 正交：联动模式长内容触底翻页同样是主流诉求 |
| 实例方法 | reset() 重置回第一项 | refresh() 立即重测分区高度 | 选中态由 modelValue 受控，外部改值即重置；异步内容兜底入口才是组件侧缺口 |
| 图标 | iconPath 图片对 | icon / activeIcon 走 n-icon 字体图标名 | 库内图标体系统一；需图片时经插槽自行排版 |