YGChatCS/pages/order/components/TopNavBar/prompt.md

顶部导航栏组件

组件名称：顶部导航栏组件

功能特性

1. 自适应状态栏高度：自动获取设备状态栏高度并适配
2. 返回功能：左侧返回按钮，支持自定义返回事件
3. 标题显示：支持传入标题文本或使用插槽自定义标题内容
4. 右侧扩展：支持右侧插槽，可添加自定义操作按钮
5. 响应式设计：适配不同屏幕尺寸

使用方法

基础用法

<template>
  <TopNavBar title="服务工单" />
</template>

<script setup>
import TopNavBar from './components/TopNavBar/index.vue'
</script>

自定义标题

<template>
  <TopNavBar>
    <template #title>
      <text class="custom-title">自定义标题</text>
    </template>
  </TopNavBar>
</template>

自定义右侧操作

<template>
  <TopNavBar title="服务工单">
    <template #right>
      <image class="menu-icon" src="./images/menu.png" @click="showMenu" />
    </template>
  </TopNavBar>
</template>

自定义返回事件

<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变量进行样式定制：

.top-nav-bar {
  --nav-bg-color: #fff;           // 背景色
  --nav-title-color: #333;        // 标题颜色
  --nav-border-color: #f0f0f0;    // 边框颜色
}

技术实现

• 使用 uniapp + Vue3 组合式 API 开发
• 自动获取系统状态栏高度进行适配
• 使用 fixed 定位实现固定顶部效果
• 支持插槽扩展，提供良好的可定制性
• 响应式设计，适配不同设备屏幕

兼容性

• 微信小程序
• H5
• App

备注

仅供学习、交流使用，请勿用于商业用途。