store-management-app/src/components/navBar/index.vue
2024-10-10 10:37:19 +08:00

63 lines
1.5 KiB
Vue

<template>
<view>
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<!-- 建议放在外层 -->
<up-sticky>
<up-navbar @leftClick="backhandle" safeAreaInsetTop :placeholder="true">
<template #left>
<view class="uv-nav-slot">
<uv-icon name="arrow-left" size="19" v-if="isShowLeft"></uv-icon>
</view>
</template>
<template #right>
<slot name="right"></slot>
</template>
<template #center>
<span style="font-size: 34rpx; font-weight: bold">
<slot></slot>
</span>
</template>
</up-navbar>
</up-sticky>
</view>
</template>
<script setup>
import { computed, useSlots, onMounted } from "vue";
const isShowLeft = computed(() => {
const pages = getCurrentPages();
return pages.length === 1 ? false : true;
});
const backhandle = () => {
const pages = getCurrentPages();
if (pages.length === 1) return;
uni.navigateBack();
};
const root = document.documentElement;
root.style.setProperty(
"--statusBarHeight",
`${
plus.storage.getItem("RunTime") === "app"
? plus.navigator.getStatusbarHeight()
: 0
}px`
);
</script>
<style lang="scss" scoped>
.status_bar {
height: var(--status-bar-height);
}
:deep(.u-status-bar) {
margin-top: var(--statusBarHeight);
}
@mixin flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: $direction;
}
</style>