内容区布局

介绍

内容区域，分为上中下三块区域，上部一般为搜索表单区，中间为内容区，底部为分页区；其中外层可以 fixed 定位形式进行多层嵌套，由 z-index 控制显示层级；底部区域可以通过 props 传入 :footer="false" 形式不显示。

文件目录

└─ src
   └─ components
      └─ Layout
         └─ ContainerLayout   # 内容区

列表页布局如下图

源码解析

<template>
	<!-- containerStyle 设置当前组件的高度 -->
	<!-- 该组件可多层嵌套,根据设置的 z-index 来判断是否需要 fixed 定位 -->
  <div
    class="container-wrapper"
    :class="{ 'is-fixed': zIndex }"
    :style="containerStyle"
  >
		<!-- 自定义头部区域，一般放置查询表单 -->
		<div class="container-header">
				<slot name="header" />
		</div>
		<!-- 内容区 需要根据是否有footer计算高度 -->
		<div class="container-content" :style="style">
				<slot />
		</div>
		<!-- 自定义底部,一般放置数据分页,可通过 footer 设置是否开启 -->
		<div class="container-footer" v-if="footer">
				<slot name="footer" />
		</div>
	</div>
</template>

computed: {
	// 计算组件样式
	containerStyle() {
		return { "z-index": this.zIndex, height: this.height };
	},
	// 计算内容区域高度
	style() {
		// 获取组件外层高度（header-bar 高度）
		let diffH = Number(this.height.match(/calc\(100vh - (\S*)px\)/)[1]);
		
		// footer 区域高度 + 组件外层高度
		let height = this.footer ? diffH + 93 : diffH + 63;

		return { height: `calc(100vh - ${height}px)` };
	},
},