useNavbar
约 658 字大约 2 分钟
2025-10-09
简介
这是一个 Vue Composition API 工具函数,用于管理应用程序导航栏的按钮状态,提供全局的导航栏按钮管理功能。
接口定义
从 @/types/navbar 导入的类型(仅列出关键项,具体以代码为准):
NavButton:导航栏按钮模型ButtonVariant:按钮样式变体枚举('primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger')
返回对象结构
调用 useNavbar() 返回以下属性与方法:
状态:
navbarButtons: Readonly<Ref<NavButton[]>>- 只读的导航栏按钮数组
操作方法:
setNavbarButtons(buttons: NavButton[]): void- 设置按钮数组addNavbarButton(button: NavButton): void- 添加/更新按钮removeNavbarButton(key: string): void- 移除按钮clearNavbarButtons(): void- 清空所有按钮
方法详解
setNavbarButtons(buttons)
- 功能:完全替换当前的导航栏按钮数组
- 参数:
buttons- 新的 NavButton 数组 - 作用:用于批量设置或重置整个导航栏
- 使用场景:初始化导航栏、权限变更后重新配置
addNavbarButton(button)
- 功能:智能添加或更新单个导航栏按钮
- 算法逻辑:
- 查找是否已存在相同 key 的按钮
- 如果存在:用新配置替换现有按钮(更新操作)
- 如果不存在:将新按钮添加到数组末尾(添加操作)
- 参数:
button- 要添加或更新的按钮配置
removeNavbarButton(key)
- 功能:移除指定key的导航栏按钮
- 逻辑:
- 查找匹配 key 的按钮索引
- 如果找到:使用 splice() 从数组中移除
- 如果未找到:静默失败(不抛出错误)
- 参数:
key- 要移除的按钮的唯一标识符
clearNavbarButtons()
- 功能:清空导航栏中的所有按钮
- 作用:将按钮数组重置为空数组
- 使用场景:用户退出登录、应用重置时
技术特点
- 全局状态管理:使用 Vue 的 ref() 创建响应式数据,全局共享状态
- 类型安全:完整的 TypeScript 类型定义,确保代码可靠性
- 只读暴露:使用 readonly() 来包装返回的 navbarButtons,防止外部组件直接修改
- 智能更新:addNavbarButton 方法支持智能添加和更新操作
- 错误处理:removeNavbarButton 方法具有静默失败特性,避免不必要的错误抛出
使用示例(片段)
const { navbarButtons, addNavbarButton, removeNavbarButton, clearNavbarButtons } = useNavbar()
// 添加新按钮
addNavbarButton({
key: 'home',
label: '首页',
to: '/home',
variant: 'primary',
onClick: () => console.log('首页被点击')
})
// 更新现有按钮
addNavbarButton({
key: 'home',
label: '主页',
to: '/main',
variant: 'secondary'
})
// 移除按钮
removeNavbarButton('home')
// 清空所有按钮
clearNavbarButtons()
// 批量设置按钮
setNavbarButtons([
{ key: 'home', label: '首页', to: '/home' },
{ key: 'about', label: '关于', to: '/about' },
{ key: 'contact', label: '联系', to: '/contact' }
])版权所有
版权归属:Evoliant
许可证:MIT