118 lines
2.7 KiB
Markdown
118 lines
2.7 KiB
Markdown
|
# Custom Nav Bar 通用导航栏组件
|
||
|
|
|
||
|
|
这是一个融合了多个导航栏版本的通用组件，支持多种配置选项。
|
||
|
|
|
||
|
|
## 功能特性
|
||
|
|
|
||
|
|
- ✅ 可配置背景颜色
|
||
|
|
- ✅ 可配置标题颜色
|
||
|
|
- ✅ 可选的返回按钮
|
||
|
|
- ✅ 可选的搜索按钮
|
||
|
|
- ✅ 可配置标题对齐方式
|
||
|
|
- ✅ 支持自定义事件处理
|
||
|
|
- ✅ 响应式设计，适配不同设备
|
||
|
|
|
||
|
|
## 使用方法
|
||
|
|
|
||
|
|
### 基础用法
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<!-- 基础导航栏 -->
|
||
|
|
<custom-nav-bar title="首页" />
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 带返回按钮的导航栏
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<!-- 带返回按钮的导航栏 -->
|
||
|
|
<custom-nav-bar
|
||
|
|
title="详情页"
|
||
|
|
:show-back="true"
|
||
|
|
background-color="#ff803a"
|
||
|
|
title-color="#ffffff"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 带搜索按钮的导航栏
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<!-- 带搜索按钮的导航栏 -->
|
||
|
|
<custom-nav-bar
|
||
|
|
title="搜索"
|
||
|
|
:show-search="true"
|
||
|
|
@search="handleSearch"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 完整配置示例
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<custom-nav-bar
|
||
|
|
title="我的页面"
|
||
|
|
:show-back="true"
|
||
|
|
:show-search="true"
|
||
|
|
background-color="#ff803a"
|
||
|
|
title-color="#ffffff"
|
||
|
|
icon-color="#ffffff"
|
||
|
|
title-align="center"
|
||
|
|
@back="handleBack"
|
||
|
|
@search="handleSearch"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const handleBack = () => {
|
||
|
|
console.log('返回按钮被点击')
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSearch = () => {
|
||
|
|
console.log('搜索按钮被点击')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 属性说明
|
||
|
|
|
||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
||
|
|
|--------|------|--------|------|
|
||
|
|
| title | String | '标题' | 导航栏标题 |
|
||
|
|
| backgroundColor | String | '#ffddca' | 背景颜色 |
|
||
|
|
| titleColor | String | '#3d3d3d' | 标题颜色 |
|
||
|
|
| iconColor | String | '#888' | 图标颜色 |
|
||
|
|
| showBack | Boolean | false | 是否显示返回按钮 |
|
||
|
|
| showSearch | Boolean | false | 是否显示搜索按钮 |
|
||
|
|
| titleAlign | String | 'center' | 标题对齐方式 ('left', 'center', 'right') |
|
||
|
|
| onBack | Function | null | 返回按钮点击回调函数 |
|
||
|
|
| onSearch | Function | null | 搜索按钮点击回调函数 |
|
||
|
|
|
||
|
|
## 事件说明
|
||
|
|
|
||
|
|
| 事件名 | 说明 | 回调参数 |
|
||
|
|
|--------|------|----------|
|
||
|
|
| back | 返回按钮点击事件 | 无 |
|
||
|
|
| search | 搜索按钮点击事件 | 无 |
|
||
|
|
|
||
|
|
## 样式定制
|
||
|
|
|
||
|
|
组件使用 SCSS 编写，支持通过 CSS 变量或覆盖样式进行定制。主要样式类：
|
||
|
|
|
||
|
|
- `.layout` - 整体布局容器
|
||
|
|
- `.navbar` - 导航栏容器
|
||
|
|
- `.titleBar` - 标题栏区域
|
||
|
|
- `.title` - 标题文本
|
||
|
|
- `.back-button` - 返回按钮
|
||
|
|
- `.search` - 搜索按钮
|
||
|
|
|
||
|
|
## 注意事项
|
||
|
|
|
||
|
|
1. 组件会自动处理状态栏高度，确保在不同设备上正确显示
|
||
|
|
2. 返回按钮默认使用 `navigateBack(1)` 进行页面返回
|
||
|
|
3. 搜索按钮需要配合 `showSearch` 属性使用
|
||
|
|
4. 标题对齐方式会影响按钮的布局，建议根据实际需求调整
|