01-Vue.js动态获取浏览器高度并根据缩放实时更新高度

项目开发第一步搭建主体框架首先解决主体布局

待完善·····

<template>
	<div class="auto">
		<div class="header_wrapper">顶部导航栏</div>
		<div class="body_wrapper">
			<div class="body_1" :style="bodystyle">
				<perfect-scrollbar :style="bodystyle" :options="options" @ps-scroll-y="scrollEvent" class="body_ps">
					<ul>
						<li v-for="item in items" :key="item.name">
							<div class="li_1">{{item.sex}}</div>
							<div class="li_2">{{item.name}}</div>
							<div class="li_3">{{item.datetime}}</div>
							<div class="li_4">{{item.type}}</div>
						</li>
					</ul>
				</perfect-scrollbar>
			</div>
			<div class="body_2">2</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				bodystyle: {
					"height": ""
				},
				options: {
					maxScrollbarLength: 60
				},
				items: []
			}
		},
		methods: {
			getHeight() {
				// 获取浏览器高度减去导航栏的70
				this.bodystyle.height = window.innerHeight - 70 + 'px';
				// console.log(h);
			},
			scrollEvent(e) {
				console.log(e);
			},
			getItems() {
				let json;
				for (var i = 0; i < 100; i++) {
					json = {
						name: "吉克隽逸" + i,
						sex: '女',
						datetime: "2019-10-10",
						type: "就诊中"
					}
					this.items.push(json)
				}
			}
		},
		mounted() {
			this.getItems()
		},
		// 打开页面生成一个高度
		created() {
			window.addEventListener('resize', this.getHeight)
			this.getHeight()
		},
		destroyed() {
			window.removeEventListener('resize', this.getHeight)
		}
	}
</script>

<style>
	body {
		/* 整体背景色*/
		background-color: lightgray;
		/* 取消内边距	*/
		padding: 0;
		/* 取消外边距 */
		margin: 0;
	}

	/* 顶部导航栏 */
	.header_wrapper {
		/* 导航栏背景色 */
		background-color: dimgray;
		/* 白色字体 */
		color: white;
		/* 字体大小 */
		font-size: 24px;
		/* 居中对齐 */
		text-align: center;
		/* 整体高度 */
		height: 50px;
		/* 垂直行距(文字居中) */
		line-height: 50px;
		/* 固定元素 */
		position: fixed;
		/* 使用固定元素后启用边距为0 */
		top: 0;
		left: 0;
		right: 0;
	}

	.body_wrapper {
		/* 启用流动布局 */
		display: flex;
		/* 设置最大宽度用来居中 */
		max-width: 1420px;
		/* 取消margi以达到居中的效果 */
		margin: 0 auto;
		/* 顶60 其他10 以布局 */
		padding: 60px 10px 10px 10px;
	}

	.body_1 {
		/* flex占比 */
		flex: 1;
		/* 白色背景 */
		background-color: white;
		/* 模块间隔 */
		margin-right: 20px;
	}

	.body_2 {
		/* flex占比 */
		flex: 3;
		/* 白色背景 */
		background-color: white;
	}

	.body_ps ul {
		/* 去掉li前面的黑点 */
		list-style: none;
		/* 去内边距 */
		padding: 0;
		/* 去外边距 */
		margin: 0;
	}

	.body_ps ul li {
		/* 单行高度 */
		height: 48px;
		/* 下边框 */
		border-bottom: 0.5px solid lightgray;
		/* 垂直行距 */
		line-height: 48px;
		/* 上下0内边 左右10内边 */
		padding: 0 10px;
		/* 启用流动布局 */
		display: flex;
		/* 字体大小 */
		font-size: 16px;
	}

	.li_1 {
		/* 右外边距20 */
		margin-right: 20px;
	}

	.li_2 {}

	.li_3 {
		/* flex占比 */
		flex: 2;
		/* 文字靠右 */
		text-align: right;
		/* 字体大小 */
		font-size: 14px;

		/* color: darkgray; */
	}

	.li_4 {
		/* flex占比 */
		flex: 1;
		/* 文字靠右 */
		text-align: right;
	}
</style>