72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
<template>
|
|
<view class="navbar">
|
|
<view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
|
|
<view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">
|
|
<wd-navbar v-if="title" :title="title" :left-arrow="leftArrow" @click-left="handleClickLeft"></wd-navbar>
|
|
<wd-navbar v-else :left-arrow="leftArrow" @click-left="handleClickLeft">
|
|
<template #title>
|
|
<slot name="title"></slot>
|
|
</template>
|
|
</wd-navbar>
|
|
</view>
|
|
</view>
|
|
<view :style="{height:getNavBarHeight() +'px'}"></view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from "@/utils/system"
|
|
import { BEFORE_NAVIGATE_BACK_EVENT } from "./back-events"
|
|
|
|
const props = defineProps({
|
|
title:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
leftArrow:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
autoBack: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
safeBack: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['click-left'])
|
|
|
|
const handleClickLeft = () => {
|
|
emit('click-left')
|
|
if (props.safeBack) {
|
|
uni.$emit(BEFORE_NAVIGATE_BACK_EVENT)
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 80)
|
|
return
|
|
}
|
|
if (props.autoBack) {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.navbar{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 9;
|
|
|
|
.statusBar{
|
|
background: var(--wot-navbar-background);
|
|
}
|
|
|
|
.titleBar{
|
|
background: var(--wot-navbar-background);
|
|
}
|
|
}
|
|
</style> |