126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
Vue
<template>
|
|
<view
|
|
class="custom-navbar"
|
|
:style="{
|
|
backgroundColor: backgroundColor,
|
|
color: textColor,
|
|
position: fixed ? 'fixed' : 'absolute',
|
|
paddingTop: `${statusBarHeight}px`,
|
|
height: `${navHeight}px`
|
|
}"
|
|
>
|
|
<view class="nav-grid">
|
|
<view class="nav-side nav-left" @click="handleLeftClick">
|
|
<slot name="left">
|
|
<image v-if="showBack" class="arrow-icon" src="/static/images/common/left.png" mdoe="aspectFill" />
|
|
</slot>
|
|
</view>
|
|
<view class="nav-title">
|
|
<slot name="title"></slot>
|
|
</view>
|
|
<view class="nav-side nav-right" @click="handleRightClick">
|
|
<slot name="right"></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'navBar',
|
|
props: {
|
|
showBack: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
fixed: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: 'transDOCTOR'
|
|
},
|
|
textColor: {
|
|
type: String,
|
|
default: '#000000'
|
|
}
|
|
},
|
|
emits: ['leftClick', 'rightClick'],
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
navHeight: 44
|
|
}
|
|
},
|
|
mounted() {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = systemInfo.statusBarHeight
|
|
// 根据平台设置 navHeight
|
|
let navHeight = 0
|
|
if (systemInfo.platform === 'android') {
|
|
navHeight = 48
|
|
} else if (systemInfo.platform === 'ios') {
|
|
navHeight = 44
|
|
} else {
|
|
navHeight = 44
|
|
}
|
|
this.navHeight = this.statusBarHeight + navHeight
|
|
this.$store.dispatch('SetNavHeight', this.navHeight)
|
|
},
|
|
methods: {
|
|
handleLeftClick() {
|
|
this.$emit('leftClick')
|
|
},
|
|
handleRightClick() {
|
|
this.$emit('rightClick')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.custom-navbar {
|
|
display: flex;
|
|
justify-content: center;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
z-index: 999;
|
|
.nav-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 0 30rpx;
|
|
|
|
.nav-side {
|
|
cursor: pointer;
|
|
&.nav-left {
|
|
text-align: left;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
&.nav-right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.arrow-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.nav-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 34rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|