buddhism/components/custom-navbar/README.md

# CustomNavbar 自定义导航栏组件

## 功能特性

- 自动适配微信小程序状态栏高度
- 自动计算胶囊按钮高度，确保文字与胶囊水平对齐
- 支持自定义标题、返回按钮图标
- 支持右侧插槽，可添加自定义内容
- 支持返回事件回调

## 使用方法

### 基础用法

```vue
<template>
  <view class="page">
    <custom-navbar title="页面标题" />
    <!-- 页面内容，无需设置 margin-top -->
    <view class="content">
      <text>页面内容</text>
    </view>
  </view>
</template>

<script>
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";

export default {
  components: {
    CustomNavbar
  }
}
</script>
```

### 自定义返回按钮图标

```vue
<custom-navbar 
  title="页面标题" 
  :backIcon="customBackIcon"
/>
```

### 隐藏返回按钮

```vue
<custom-navbar 
  title="页面标题" 
  :showBack="false"
/>
```

### 添加右侧内容

```vue
<custom-navbar title="页面标题">
  <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`，不会影响其他组件