refactor：重构navbar
parent
e632a6dd8f
commit
b0004e30c7
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<view class="custom-navbar" :style="navbarStyle">
|
||||
<view class="navbar-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="navbar-body" :style="{ height: navBodyHeight + 'px' }">
|
||||
<view class="navbar-left">
|
||||
<view v-if="showBackBtn" class="back-btn" @click="handleBack">
|
||||
<uni-icons type="arrow-left" :size="20" :color="textColor"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="navbar-center">
|
||||
<text class="navbar-title" :style="{ color: textColor }">{{ translatedTitle }}</text>
|
||||
</view>
|
||||
<view class="navbar-right">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { translateLiteral } from '@/locales'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#22486e'
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
}
|
||||
})
|
||||
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
const statusBarHeight = ref(systemInfo.statusBarHeight || 0)
|
||||
const currentPagesLength = ref(1)
|
||||
|
||||
const navBodyHeight = computed(() => {
|
||||
const platform = systemInfo.platform || ''
|
||||
if (platform === 'android') return 48
|
||||
if (platform === 'ios') return 44
|
||||
return 44
|
||||
})
|
||||
|
||||
const isLoginPage = computed(() => {
|
||||
const pages = getCurrentPages()
|
||||
if (pages && pages.length > 0) {
|
||||
return pages[pages.length - 1].route === 'pages/login'
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
const showBackBtn = computed(() => {
|
||||
if (props.showBack !== undefined) return props.showBack
|
||||
return currentPagesLength.value > 1
|
||||
})
|
||||
|
||||
const navbarStyle = computed(() => {
|
||||
const bg = isLoginPage.value ? '#ffffff' : props.backgroundColor
|
||||
return {
|
||||
backgroundColor: bg,
|
||||
paddingTop: '0px'
|
||||
}
|
||||
})
|
||||
|
||||
const translatedTitle = computed(() => translateLiteral(props.title))
|
||||
|
||||
const textColor = computed(() => {
|
||||
if (isLoginPage.value) return '#000000'
|
||||
return props.textColor
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
const pages = getCurrentPages()
|
||||
currentPagesLength.value = pages ? pages.length : 1
|
||||
})
|
||||
|
||||
function handleBack() {
|
||||
uni.navigateBack({
|
||||
fail: () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-navbar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.navbar-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-left,
|
||||
.navbar-right {
|
||||
width: 120rpx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.back-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
max-width: calc(100% - 240rpx);
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue