CategoryNav 品类导航
电商分类页常用的导航模式。支持双向同步联动（左侧点击 -> 右侧滚动；右侧滚动 -> 左侧居中高亮），内置骨架屏与极速性能优化。
基础用法 (大数据量演示)
该示例展示了在 10 类大型分类数据 下的联动表现。由于侧边栏内置了自动居中逻辑，即便分类项极多，激活项也能始终保持在中心位置。
大数据量双向联动
加载状态
开启 `loading` 后展示高品质骨架屏。该示例演示了如何通过外部状态控制加载过程。
异步加载演示
自定义主题
通过 theme-overrides 属性可以快速覆盖内部 CSS 变量，无需编写复杂的全局样式。
品牌定制主题
在 Nuxt 中使用
该组件完美支持 Nuxt 3/4 的 SSR（服务端渲染）。配置方式极其精简：
ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@yh-ui/nuxt'],
yhUI: {
components: ['YhCategoryNav']
}
})API
Props (属性)
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
categories | 核心数据源，包含 ID 和子类列表 | CategoryItem[] | [] |
model-value / v-model | 当前激活的一级分类 ID | string | number | null | null |
sub-value / v-model:subValue | 当前激活的二级子分类 ID | string | number | null | null |
side-width | 左侧边栏固定宽度 | string | 84px |
show-all | 是否在顶部展示「全部」项 | boolean | true |
loading | 是否处于精美骨架屏加载状态 | boolean | false |
columns | 右侧平铺子类的列数 | number | 3 |
sub-image-size | 子类缩略图尺寸 (px) | number | 64 |
anchor | 是否开启双向滚动监听锚定 | boolean | true |
theme-overrides | 自定义主题 CSS 变量对象 | Record<string, string> | {} |
Events (事件)
| 事件名 | 说明 | 回调参数 |
|---|---|---|
category-click | 点击一级分类项时触发 | (item: CategoryItem) |
sub-category-click | 点击二级子项时触发 | (item: CategorySubItem, parent: CategoryItem) |
update:modelValue | 主分类 ID 变更时同步更新 | (id: string | number | null) |
update:subValue | 子分类 ID 变更时同步更新 | (id: string | number | null) |
Slots (插槽)
| 插槽名 | 说明 | 参数 |
|---|---|---|
all-icon | 自定义「全部」按钮的图标 | - |
header | 内容区顶部业务插槽 | - |
footer | 内容区底部业务插槽 | - |
section-header | 每个大类分区的标题自定义渲染 | { category: CategoryItem } |
section-footer | 每个大类分区的辅助自定义渲染 | { category: CategoryItem } |
sub-item | 二级子类的完全自定义逻辑渲染 | { sub: CategorySubItem, parent: CategoryItem } |
Expose
当前组件未暴露公开实例方法或属性。
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-category-nav-side-bg | 左侧边栏背景色 | #f7f8fa |
--yh-category-nav-content-bg | 右侧内容区背景色 | #ffffff |
--yh-category-nav-side-active-color | 激活项文字及指示条颜色 | var(--yh-color-primary) |
--yh-category-nav-side-active-bg | 激活项背景色 | #ffffff |
--yh-category-nav-side-width | 侧边栏宽度 | 84px |
--yh-category-nav-sub-image-size | 二级分类图尺寸 | 64px |
--yh-category-nav-columns | 二级分类平铺列数 | 3 |
--yh-category-nav-section-title-color | 区块标题颜色 | var(--yh-text-color-secondary) |
类型导出
| 名称 | 说明 |
|---|---|
YhCategoryNavProps | YhCategoryNav props 类型 |
YhCategoryNavEmits | YhCategoryNav emits 类型 |
YhCategoryNavSlots | YhCategoryNav slots 类型 |
YhCategoryItem | 一级分类项类型 |
YhCategorySubItem | 二级分类项类型 |
YhCategoryNavInstance | YhCategoryNav 实例类型 |