133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<template>
|
||
<view :class="navBarClass" :style="navBarStyle">
|
||
<!-- 状态栏占位 -->
|
||
<view :style="{ height: statusBarHeight + 'px' }" v-if="!hideStatusBar"></view>
|
||
|
||
<!-- 导航栏内容 -->
|
||
<view class="nav-bar-content" :style="{ height: navBarHeight + 'px' }">
|
||
<!-- 左侧返回按钮 -->
|
||
<view class="nav-bar-left" @click="handleBack" v-if="showBack">
|
||
<uni-icons type="left" size="20" :color="backIconColor" />
|
||
</view>
|
||
|
||
<!-- 中间标题区域 -->
|
||
<view :class="['nav-bar-center', `nav-bar-center--${titleAlign}`]">
|
||
<slot name="title">
|
||
<text class="nav-bar-title" :style="{ color: titleColor }">{{ title }}</text>
|
||
</slot>
|
||
</view>
|
||
|
||
<!-- 右侧操作区域 -->
|
||
<view class="nav-bar-right">
|
||
<slot name="right"></slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onMounted, ref } from 'vue'
|
||
|
||
// 定义props
|
||
const props = defineProps({
|
||
// 标题文本
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 是否固定在顶部
|
||
fixed: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否显示返回按钮
|
||
showBack: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 背景颜色
|
||
backgroundColor: {
|
||
type: String,
|
||
default: '#ffffff'
|
||
},
|
||
// 标题颜色
|
||
titleColor: {
|
||
type: String,
|
||
default: '#333333'
|
||
},
|
||
// 返回按钮图标颜色
|
||
backIconColor: {
|
||
type: String,
|
||
default: '#333333'
|
||
},
|
||
// 是否隐藏状态栏占位
|
||
hideStatusBar: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 自定义z-index
|
||
zIndex: {
|
||
type: Number,
|
||
default: 999
|
||
},
|
||
// 标题对齐方式
|
||
titleAlign: {
|
||
type: String,
|
||
default: 'center', // 'center' | 'left'
|
||
validator: (value) => ['center', 'left'].includes(value)
|
||
}
|
||
})
|
||
|
||
// 定义emits
|
||
const emit = defineEmits(['back'])
|
||
|
||
// 系统信息
|
||
const statusBarHeight = ref(0)
|
||
const navBarHeight = ref(44) // 默认导航栏高度
|
||
|
||
// 获取系统信息
|
||
onMounted(() => {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
statusBarHeight.value = systemInfo.statusBarHeight || 0
|
||
|
||
// 根据平台设置导航栏高度
|
||
if (systemInfo.platform === 'ios') {
|
||
navBarHeight.value = 44
|
||
} else {
|
||
navBarHeight.value = 48
|
||
}
|
||
})
|
||
|
||
// 计算导航栏样式类
|
||
const navBarClass = computed(() => {
|
||
return [
|
||
'top-nav-bar',
|
||
{
|
||
'top-nav-bar--fixed': props.fixed
|
||
}
|
||
]
|
||
})
|
||
|
||
// 计算导航栏样式
|
||
const navBarStyle = computed(() => {
|
||
return {
|
||
backgroundColor: props.backgroundColor,
|
||
zIndex: props.zIndex
|
||
}
|
||
})
|
||
|
||
// 处理返回事件
|
||
const handleBack = () => {
|
||
emit('back')
|
||
// 如果没有监听back事件，默认执行返回上一页
|
||
if (!emit('back')) {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style> |