98 lines
2.0 KiB
Markdown
98 lines
2.0 KiB
Markdown
|
# CustomNavbar 自定义导航栏组件
|
||
|
|
|
||
|
|
## 功能特性
|
||
|
|
|
||
|
|
- 自动适配微信小程序状态栏高度
|
||
|
|
- 自动计算胶囊按钮高度，确保文字与胶囊水平对齐
|
||
|
|
- 支持自定义标题、返回按钮图标
|
||
|
|
- 支持右侧插槽，可添加自定义内容
|
||
|
|
- 支持返回事件回调
|
||
|
|
|
||
|
|
## 使用方法
|
||
|
|
|
||
|
|
### 基础用法
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<custom-navbar title="页面标题" @back="onBack" />
|
||
|
|
<!-- 页面内容，无需设置 margin-top -->
|
||
|
|
<view class="content">
|
||
|
|
<text>页面内容</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
CustomNavbar
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onBack() {
|
||
|
|
console.log('返回按钮被点击');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 自定义返回按钮图标
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<custom-navbar
|
||
|
|
title="页面标题"
|
||
|
|
:backIcon="customBackIcon"
|
||
|
|
@back="onBack"
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 隐藏返回按钮
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<custom-navbar
|
||
|
|
title="页面标题"
|
||
|
|
:showBack="false"
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 添加右侧内容
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<custom-navbar title="页面标题" @back="onBack">
|
||
|
|
<template #right>
|
||
|
|
<view class="right-content">
|
||
|
|
<text>右侧内容</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</custom-navbar>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Props
|
||
|
|
|
||
|
|
| 参数 | 类型 | 默认值 | 说明 |
|
||
|
|
|------|------|--------|------|
|
||
|
|
| title | String | '' | 导航栏标题 |
|
||
|
|
| backIcon | String | CommonEnum.BACK_BUTTON | 返回按钮图标路径 |
|
||
|
|
| showBack | Boolean | true | 是否显示返回按钮 |
|
||
|
|
|
||
|
|
## Events
|
||
|
|
|
||
|
|
| 事件名 | 说明 | 回调参数 |
|
||
|
|
|--------|------|----------|
|
||
|
|
| back | 点击返回按钮时触发 | - |
|
||
|
|
|
||
|
|
## Slots
|
||
|
|
|
||
|
|
| 插槽名 | 说明 |
|
||
|
|
|--------|------|
|
||
|
|
| right | 右侧内容插槽 |
|
||
|
|
|
||
|
|
## 注意事项
|
||
|
|
|
||
|
|
1. 组件会自动计算状态栏和胶囊高度，无需手动设置
|
||
|
|
2. 组件使用 `position: fixed` 定位，确保在页面顶部
|
||
|
|
3. 组件内部包含填充区，页面内容无需设置 `margin-top`
|
||
|
|
4. 组件样式使用 `scoped`，不会影响其他组件
|