时舟年
107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<template>
|
|
<view class="sub-nav">
|
|
<view class="sub-nav__toolbar" :style="toolbarStyle">
|
|
<view class="sub-nav__nav">
|
|
<view class="sub-nav__back" @tap.stop="$emit('back')">
|
|
<image
|
|
class="sub-nav__back-icon"
|
|
src="/static/images/chevronleft.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
<text class="sub-nav__title">{{ title }}</text>
|
|
<view class="sub-nav__right">
|
|
<view
|
|
v-if="rightText"
|
|
class="sub-nav__action"
|
|
:class="{ 'sub-nav__action--button': actionButton }"
|
|
@tap.stop="$emit('right-action')"
|
|
>
|
|
<text class="sub-nav__action-text">{{ rightText }}</text>
|
|
</view>
|
|
<view class="sub-nav__capsule" :class="{ 'sub-nav__capsule--h5': isH5 }" :style="capsuleStyle"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sub-nav__spacer" :style="toolbarSpacerStyle"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
options: {
|
|
virtualHost: false,
|
|
styleIsolation: 'apply-shared'
|
|
},
|
|
props: {
|
|
title: { type: String, required: true },
|
|
rightText: { type: String, default: '' },
|
|
actionButton: { type: Boolean, default: false }
|
|
},
|
|
emits: ['back', 'right-action'],
|
|
data() {
|
|
return {
|
|
toolbarStyle: {},
|
|
toolbarSpacerStyle: {},
|
|
capsuleStyle: {},
|
|
isH5: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.syncNavSafeArea()
|
|
this.$nextTick(() => {
|
|
setTimeout(() => this.syncNavSafeArea(), 50)
|
|
})
|
|
},
|
|
methods: {
|
|
syncNavSafeArea() {
|
|
try {
|
|
const sys = uni.getSystemInfoSync()
|
|
const statusBarHeight = sys.statusBarHeight || 0
|
|
const navHeight = 44
|
|
const extraGap = 4
|
|
const menu = uni.getMenuButtonBoundingClientRect?.()
|
|
// #ifdef H5
|
|
this.isH5 = true
|
|
// #endif
|
|
// #ifndef H5
|
|
this.isH5 = false
|
|
// #endif
|
|
if (!this.isH5 && typeof window !== 'undefined' && !menu?.width) {
|
|
this.isH5 = sys.uniPlatform === 'web' || sys.platform === 'web'
|
|
}
|
|
|
|
this.toolbarStyle = {
|
|
paddingTop: `${statusBarHeight}px`
|
|
}
|
|
|
|
this.toolbarSpacerStyle = {
|
|
height: `${statusBarHeight + navHeight + extraGap}px`
|
|
}
|
|
|
|
if (!this.isH5 && menu && menu.width) {
|
|
const capsuleGap = sys.windowWidth - menu.left + 8
|
|
this.capsuleStyle = {
|
|
width: `${capsuleGap}px`,
|
|
minWidth: `${capsuleGap}px`
|
|
}
|
|
} else {
|
|
this.capsuleStyle = {
|
|
width: '0px',
|
|
minWidth: '0px'
|
|
}
|
|
}
|
|
} catch (e) {
|
|
this.toolbarSpacerStyle = { height: '44px' }
|
|
this.isH5 = true
|
|
this.capsuleStyle = { width: '0px', minWidth: '0px' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/style/memberInfo/member-info-sub-nav.css';
|
|
</style>
|