HomeLease/components/custom-nav-bar

Custom Nav Bar 通用导航栏组件

这是一个融合了多个导航栏版本的通用组件，支持多种配置选项。

功能特性

• ✅ 可配置背景颜色
• ✅ 可配置标题颜色
• ✅ 可选的返回按钮
• ✅ 可选的搜索按钮
• ✅ 可配置标题对齐方式
• ✅ 支持自定义事件处理
• ✅ 响应式设计，适配不同设备

使用方法

基础用法

<template>
  <!-- 基础导航栏 -->
  <custom-nav-bar title="首页" />
</template>

带返回按钮的导航栏

<template>
  <!-- 带返回按钮的导航栏 -->
  <custom-nav-bar 
    title="详情页" 
    :show-back="true"
    background-color="#ff803a"
    title-color="#ffffff"
  />
</template>

带搜索按钮的导航栏

<template>
  <!-- 带搜索按钮的导航栏 -->
  <custom-nav-bar 
    title="搜索" 
    :show-search="true"
    @search="handleSearch"
  />
</template>

完整配置示例

<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. 标题对齐方式会影响按钮的布局，建议根据实际需求调整