修改layout组件
This commit is contained in:
parent
e6125ddea8
commit
d4f37fa386
|
@ -1,32 +1,31 @@
|
|||
<template>
|
||||
<view class="page-layout" :style="{ backgroundColor: backgroundColor, minHeight: minHeight }">
|
||||
<view
|
||||
v-if="showHeader"
|
||||
class="page-header"
|
||||
:class="[textColor]"
|
||||
:style="{
|
||||
height: header.height + 'px',
|
||||
paddingTop: header.pt + 'px',
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
height: headerHeight + 'px',
|
||||
backgroundColor: headerBackgroundColor,
|
||||
}"
|
||||
>
|
||||
<!-- 首页选择地址 -->
|
||||
<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="city">成都市</text>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 正常返回按钮 -->
|
||||
<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>
|
||||
</view>
|
||||
</block>
|
||||
<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 class="page-body" :style="{ paddingTop: bodyPt + 'px' }">
|
||||
<view class="page-body" :style="{ paddingTop: bodyPaddingTop + 'px' }">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="page-footer"></view>
|
||||
|
@ -39,11 +38,9 @@ export default {
|
|||
name: "component-layout",
|
||||
data() {
|
||||
return {
|
||||
header: {
|
||||
height: 0,
|
||||
pt: 0,
|
||||
},
|
||||
bodyPt: 0,
|
||||
headerHeight: 0,
|
||||
statusBarHeight: 0,
|
||||
bodyPaddingTop: 0,
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
|
@ -76,6 +73,10 @@ export default {
|
|||
type: String,
|
||||
default: "dark",
|
||||
},
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
|
@ -85,14 +86,18 @@ export default {
|
|||
mounted() {
|
||||
const { statusBarHeight, headerHeight } = this.config;
|
||||
// #ifndef H5
|
||||
this.header.pt = statusBarHeight;
|
||||
this.header.height = headerHeight;
|
||||
this.statusBarHeight = statusBarHeight;
|
||||
this.headerHeight = headerHeight;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.header.pt = 0;
|
||||
this.header.height = this.$utils.rpx2px(headerHeight * 2);
|
||||
this.statusBarHeight = 0;
|
||||
this.headerHeight = this.$utils.rpx2px(headerHeight * 2);
|
||||
// #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: {
|
||||
onClick() {
|
||||
|
|
Loading…
Reference in New Issue