114 lines
2.2 KiB
Markdown
114 lines
2.2 KiB
Markdown
## 顶部导航栏组件
|
||
|
||
组件名称：顶部导航栏组件
|
||
|
||
## 功能特性
|
||
|
||
1. **自适应状态栏高度**：自动获取设备状态栏高度并适配
|
||
2. **返回功能**：左侧返回按钮，支持自定义返回事件
|
||
3. **标题显示**：支持传入标题文本或使用插槽自定义标题内容
|
||
4. **右侧扩展**：支持右侧插槽，可添加自定义操作按钮
|
||
5. **响应式设计**：适配不同屏幕尺寸
|
||
|
||
## 使用方法
|
||
|
||
### 基础用法
|
||
|
||
```vue
|
||
<template>
|
||
<TopNavBar title="服务工单" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import TopNavBar from './components/TopNavBar/index.vue'
|
||
</script>
|
||
```
|
||
|
||
### 自定义标题
|
||
|
||
```vue
|
||
<template>
|
||
<TopNavBar>
|
||
<template #title>
|
||
<text class="custom-title">自定义标题</text>
|
||
</template>
|
||
</TopNavBar>
|
||
</template>
|
||
```
|
||
|
||
### 自定义右侧操作
|
||
|
||
```vue
|
||
<template>
|
||
<TopNavBar title="服务工单">
|
||
<template #right>
|
||
<image class="menu-icon" src="./images/menu.png" @click="showMenu" />
|
||
</template>
|
||
</TopNavBar>
|
||
</template>
|
||
```
|
||
|
||
### 自定义返回事件
|
||
|
||
```vue
|
||
<template>
|
||
<TopNavBar title="服务工单" @back="handleBack" />
|
||
</template>
|
||
|
||
<script setup>
|
||
const handleBack = () => {
|
||
// 自定义返回逻辑
|
||
console.log('自定义返回')
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## Props
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| title | String | '' | 导航栏标题 |
|
||
| showBack | Boolean | true | 是否显示返回按钮 |
|
||
|
||
## Events
|
||
|
||
| 事件名 | 说明 | 参数 |
|
||
|--------|------|------|
|
||
| back | 点击返回按钮时触发 | - |
|
||
|
||
## Slots
|
||
|
||
| 插槽名 | 说明 |
|
||
|--------|------|
|
||
| title | 自定义标题内容 |
|
||
| right | 自定义右侧操作区域 |
|
||
|
||
## 样式定制
|
||
|
||
组件支持通过CSS变量进行样式定制：
|
||
|
||
```scss
|
||
.top-nav-bar {
|
||
--nav-bg-color: #fff; // 背景色
|
||
--nav-title-color: #333; // 标题颜色
|
||
--nav-border-color: #f0f0f0; // 边框颜色
|
||
}
|
||
```
|
||
|
||
## 技术实现
|
||
|
||
- 使用 uniapp + Vue3 组合式 API 开发
|
||
- 自动获取系统状态栏高度进行适配
|
||
- 使用 fixed 定位实现固定顶部效果
|
||
- 支持插槽扩展，提供良好的可定制性
|
||
- 响应式设计，适配不同设备屏幕
|
||
|
||
## 兼容性
|
||
|
||
- 微信小程序
|
||
- H5
|
||
- App
|
||
|
||
## 备注
|
||
|
||
仅供学习、交流使用，请勿用于商业用途。 |