124 lines
2.6 KiB
Vue
124 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<!-- 头部 左中右 -->
|
||
|
|
<view ref="hs" :class="['dw', background == 'jb' && 'bg']" :style="{ ...jhbStyle }" id="hs">
|
||
|
|
<view class="jy-header-box">
|
||
|
|
<uni-icons class="mlr20" @click="goto" type="left" size="22"></uni-icons>
|
||
|
|
<view class="jy-header-center" @click="emit('center')">
|
||
|
|
<slot name="center">
|
||
|
|
<text class="jy-header-title">{{ title }}</text>
|
||
|
|
</slot>
|
||
|
|
</view>
|
||
|
|
<view class="mlr20">
|
||
|
|
<slot name="right" v-if="isRight">
|
||
|
|
<uni-icons type="more-filled" size="30"></uni-icons>
|
||
|
|
</slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<slot name="bottom" />
|
||
|
|
</view>
|
||
|
|
<!-- 幽灵盒子 -->
|
||
|
|
<view class="jy-header-box" :style="{ ...jhbStyle, 'height': `${ylh}` }"></view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
defineExpose,
|
||
|
|
onMounted,
|
||
|
|
nextTick
|
||
|
|
} from 'vue';
|
||
|
|
import {
|
||
|
|
statusBarHeight
|
||
|
|
} from '@/components/public/Mixins.js';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
title: { // 标题
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
isRight: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
// 是否跳转
|
||
|
|
isSkip: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
type: String,
|
||
|
|
default: '#F2F2F2'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const hs = ref(null);
|
||
|
|
const ylh = ref('0px');
|
||
|
|
const updateAltitude = () => {
|
||
|
|
nextTick().then(() => {
|
||
|
|
uni.createSelectorQuery().select('#hs').boundingClientRect((rect) => {
|
||
|
|
ylh.value = rect.height + 'px';
|
||
|
|
}).exec();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 暴露方法
|
||
|
|
defineExpose({
|
||
|
|
updateAltitude
|
||
|
|
});
|
||
|
|
|
||
|
|
// 清理函数
|
||
|
|
onMounted(() => {
|
||
|
|
updateAltitude()
|
||
|
|
});
|
||
|
|
|
||
|
|
const jhbStyle = ref({
|
||
|
|
'padding-top': `${statusBarHeight()}`,
|
||
|
|
'padding-bottom': `2px`
|
||
|
|
});
|
||
|
|
|
||
|
|
const goto = () => {
|
||
|
|
if (props.isSkip) {
|
||
|
|
uni.navigateBack();
|
||
|
|
}
|
||
|
|
emit('back');
|
||
|
|
};
|
||
|
|
|
||
|
|
const emit = defineEmits(['right', 'center', 'back']);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
// 定位
|
||
|
|
.dw {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg {
|
||
|
|
background: linear-gradient(50deg, #DBFCE9 -7%, #FFFBF3 50%, #FEEEDB 82%, #FEE3CD 102%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.jy-header-box {
|
||
|
|
// 过高之后固定
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
height: 88rpx;
|
||
|
|
z-index: 9;
|
||
|
|
|
||
|
|
text {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: rgba(0, 0, 0, 0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|