「 抠抠记账反思」解决安卓软键盘问题

思路：会有软键盘问题是因为当软键盘弹起时，页面高度变了
导致页面变形
解决思路：
设置当前页面的高度为页面高度即可

<template>
	<div class="layout-wrapper" :style="{height: scrollerHeight}">
		<div class="content">
			<slot></slot>
		</div>
		<Nav></Nav>
	</div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  @Component
  export  default class App extends Vue {
    get scrollerHeight(){
      return document.documentElement.clientHeight + 'px'
    }

    mounted() {
      // window.onresize监听页面高度的变化
      window.onresize = function()  {
        console.log(document.querySelector('#app').clientHeight)
      }
    }
  }
</script>

<style scoped lang="scss">
	.layout-wrapper {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.content {
		flex-grow: 1; // 让内容尽量占满
		overflow: auto;
		display: flex;
		flex-direction: column;
	}
</style>