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`，不会影响其他组件 |