71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
|
<view class="nav-bar-container">
|
|
<view class="status-placeholder" :style="{height:`${data.statusBarHeight}px`}"></view>
|
|
<uni-nav-bar class="nav-bar" :border="false" :title="title" v-bind="$attrs" v-on="$attrs">
|
|
<template v-slot:left>
|
|
<slot name="left">
|
|
</slot>
|
|
</template>
|
|
</uni-nav-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
defineProps,
|
|
defineEmits,
|
|
onMounted,
|
|
reactive
|
|
} from 'vue'
|
|
|
|
// 定义组件属性
|
|
const props = defineProps({})
|
|
|
|
// 定义事件
|
|
const emit = defineEmits(['back', 'right-click'])
|
|
|
|
const data = reactive({
|
|
statusBarHeight: 0
|
|
})
|
|
|
|
onMounted(() => {
|
|
// 同步获取系统信息
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
data.statusBarHeight = systemInfo.statusBarHeight || 0;
|
|
})
|
|
|
|
// 返回按钮点击事件
|
|
const onBack = () => {
|
|
emit('back')
|
|
// 默认返回上一页
|
|
uni.navigateBack()
|
|
}
|
|
|
|
// 右侧按钮点击事件
|
|
const onRightClick = () => {
|
|
emit('right-click')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.nav-bar-container{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.nav-bar {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.status-placeholder {
|
|
width: 100%;
|
|
}
|
|
|
|
::v-deep .uni-navbar__content {
|
|
width: 100%;
|
|
}
|
|
</style> |