116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
<script setup>
|
|
import { navigateBack } from '@/utils/router'
|
|
import { useSlots } from 'vue'
|
|
|
|
const slots = useSlots()
|
|
|
|
const props = defineProps({
|
|
title: { type: String, default: '' },
|
|
/** 是否带背景 */
|
|
isTopBg: { type: Boolean, default: false },
|
|
/** 是否有占位符 */
|
|
isPlaceholder: { type: Boolean, default: false },
|
|
/** 是否自定义返回事件 */
|
|
isCustomBack: { type: Boolean, default: false }
|
|
})
|
|
|
|
const emits = defineEmits(['onBack'])
|
|
|
|
// 判断是否传入了名为 "back" 的插槽
|
|
const hasBackSlot = !!slots.back
|
|
|
|
const onBack = () => {
|
|
if (props.isCustomBack) {
|
|
emits('onBack')
|
|
} else {
|
|
navigateBack()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view>
|
|
<view :class="{ 'nav-bar_bg': props.isTopBg }" class="nav-bar">
|
|
<view class="status_bar">
|
|
<!-- 这里是状态栏 -->
|
|
</view>
|
|
<view class="nav-bar-box">
|
|
<!-- 左侧插槽 -->
|
|
<view @click="onBack">
|
|
<image
|
|
v-if="!hasBackSlot"
|
|
src="/static/images/login/back.png"
|
|
mode="heightFix"
|
|
class="top_left-icon"
|
|
></image>
|
|
<slot name="back"></slot>
|
|
</view>
|
|
|
|
<!-- 中间标题 -->
|
|
<view v-if="props.title" class="nav-bar-title">
|
|
<text>{{ props.title }}</text>
|
|
</view>
|
|
|
|
<!-- 右侧插槽 -->
|
|
<view>
|
|
<slot name="right"></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="props.isPlaceholder" class="nav-bar-placeholder"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
}
|
|
|
|
.nav-bar_bg {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.top_left-icon {
|
|
height: 36rpx;
|
|
}
|
|
|
|
.status_bar {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-bar-box {
|
|
padding: 0 36rpx;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.nav-bar-title {
|
|
position: absolute;
|
|
width: calc(100% - 72rpx);
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
text {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-bar-placeholder {
|
|
height: calc(var(--status-bar-height) + 44px);
|
|
}
|
|
</style>
|