18. 修复底部导航栏被软键盘顶起问题

当在移动端输入时，软键盘会把底部导航栏顶起
解决办法：监测页面高度变化，软键盘弹出时，页面高度会变小，此时隐藏底部导航栏

在 store 的 state 中添加一个 show 状态，用于控制导航栏的显示或隐藏

  state: {
    // ...
    show: true,
  },
  mutations: {
    changeHidden(state, payload) {
      state.show = payload.show
    },
    // ...
  }

在组件中使用 state

<template>
<div class="wrapper">
   <slot />
  <Docker v-show="store.state.show"/>
</div>
</template>
<script lang="ts" setup>
import { useStore } from 'vuex';
import Docker from './Docker.vue';
const store = useStore()
</script>

在 App 组件中添加事件监听和状态监测

<script lang="ts" setup>
import { onMounted, watchEffect,ref } from 'vue';
import { useStore } from 'vuex';
const store = useStore()
const showHeight = ref(window.document.documentElement.clientHeight)
const docHeight = window.document.documentElement.clientHeight
onMounted(()=>{
  window.onresize = () => {
    showHeight.value = window.document.documentElement.clientHeight
  }
})
watchEffect(() => {
  if(showHeight.value < docHeight) {
    store.commit('changeHidden', {show: false})
  } else {
    store.commit('changeHidden', {show: true})
  }
})
</script>