topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改layout组件

This commit is contained in:
TOP糯米 2023-03-05 22:53:05 +08:00
parent e6125ddea8
commit d4f37fa386
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/layout/layout.vue
View File

@ -1,32 +1,31 @@
<template> <template>
<view class="page-layout" :style="{ backgroundColor: backgroundColor, minHeight: minHeight }"> <view class="page-layout" :style="{ backgroundColor: backgroundColor, minHeight: minHeight }">
<view <view
v-if="showHeader"
class="page-header" class="page-header"
:class="[textColor]" :class="[textColor]"
:style="{ :style="{
height: header.height + 'px', paddingTop: statusBarHeight + 'px',
paddingTop: header.pt + 'px', height: headerHeight + 'px',
backgroundColor: headerBackgroundColor, backgroundColor: headerBackgroundColor,
}" }"
> >
<!-- 首页选择地址 -->
<block v-if="btnType === 'city'"> <block v-if="btnType === 'city'">
<view class="page-index-btn change-city" :style="{ height: header.height + 'px' }" @click="changeCity"> <view class="page-index-btn change-city" :style="{ height: headerHeight + 'px' }" @click="changeCity">
<text class="iconfont icon-31dingwei"></text> <text class="iconfont icon-31dingwei"></text>
<text class="city">成都市</text> <text class="city">成都市</text>
</view> </view>
</block> </block>
<!-- 正常返回按钮 -->
<block v-if="btnType === 'back'"> <block v-if="btnType === 'back'">
<view class="page-index-btn back" :style="{ height: header.height + 'px' }" @click="onClick"> <view class="page-index-btn back" :style="{ height: headerHeight + 'px' }" @click="onClick">
<text class="iconfont icon-fanhui"></text> <text class="iconfont icon-fanhui"></text>
</view> </view>
</block> </block>
<view class="page-title"> <view class="page-title">
<text class="title-text" :style="{ lineHeight: header.height + 'px' }">{{ title }}</text> <text class="title-text" :style="{ lineHeight: headerHeight + 'px' }">{{ title }}</text>
</view> </view>
</view> </view>
<view class="page-body" :style="{ paddingTop: bodyPt + 'px' }"> <view class="page-body" :style="{ paddingTop: bodyPaddingTop + 'px' }">
<slot></slot> <slot></slot>
</view> </view>
<view class="page-footer"></view> <view class="page-footer"></view>
@ -39,11 +38,9 @@ export default {
name: "component-layout", name: "component-layout",
data() { data() {
return { return {
header: { headerHeight: 0,
height: 0, statusBarHeight: 0,
pt: 0, bodyPaddingTop: 0,
},
bodyPt: 0,
}; };
}, },
components: {}, components: {},
@ -76,6 +73,10 @@ export default {
type: String, type: String,
default: "dark", default: "dark",
}, },
showHeader: {
type: Boolean,
default: true,
},
}, },
computed: { computed: {
...mapState({ ...mapState({
@ -85,14 +86,18 @@ export default {
mounted() { mounted() {
const { statusBarHeight, headerHeight } = this.config; const { statusBarHeight, headerHeight } = this.config;
// #ifndef H5 // #ifndef H5
this.header.pt = statusBarHeight; this.statusBarHeight = statusBarHeight;
this.header.height = headerHeight; this.headerHeight = headerHeight;
// #endif // #endif
// #ifdef H5 // #ifdef H5
this.header.pt = 0; this.statusBarHeight = 0;
this.header.height = this.$utils.rpx2px(headerHeight * 2); this.headerHeight = this.$utils.rpx2px(headerHeight * 2);
// #endif // #endif
this.bodyPt = this.header.pt + this.header.height; let safePaddingTop = this.statusBarHeight + this.headerHeight;
this.$emit("input", safePaddingTop);
if (this.showHeader) {
this.bodyPaddingTop = safePaddingTop;
}
}, },
methods: { methods: {
onClick() { onClick() {