86 lines
1.6 KiB
Vue
86 lines
1.6 KiB
Vue
<template>
|
|
<view class="page-container" :style="{ backgroundColor: backgroundColor }">
|
|
<nav-header :title="title" :showBack="showBack" :backUrl="backUrl" :color="navColor"
|
|
:backgroundColor="navBackgroundColor" :fixed="fixed" :statusBar="statusBar" :border="border">
|
|
</nav-header>
|
|
<view class="page-container__content" :style="{ paddingBottom: paddingBottom }">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import NavHeader from '@/components/nav-header/nav-header.vue'
|
|
|
|
export default {
|
|
name: 'PageContainer',
|
|
components: {
|
|
NavHeader
|
|
},
|
|
props: {
|
|
// 标题文字
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 是否显示返回按钮
|
|
showBack: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 返回页面路径，不传则返回上一页
|
|
backUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 导航栏文字颜色
|
|
navColor: {
|
|
type: String,
|
|
default: '#000000'
|
|
},
|
|
// 导航栏背景颜色
|
|
navBackgroundColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
// 页面背景颜色
|
|
backgroundColor: {
|
|
type: String,
|
|
default: '#FFFFFF'
|
|
},
|
|
// 是否固定导航栏在顶部
|
|
fixed: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否包含状态栏
|
|
statusBar: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否显示底部边框
|
|
border: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 底部内边距
|
|
paddingBottom: {
|
|
type: String,
|
|
default: '0px'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-container {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
|
|
&__content {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style> |