Vue window.onresize监听窗口变化

示例：在webapp页面的底部，有时候我们会使用 position: absolute;bottom: 0; 实现一些需求，如tabbar，固定到底部的一些操作按钮。
问题：当页面有输入框的时候，底部的定位元素会被输入法顶到上面？
解决办法：
使用window.onresize监听窗口变化，动态修改有定位的元素css，当窗口发生变化时，让定位元素隐藏。

用法:

1. 在store.js里定义:
   screenHeight——用于存放全局的视口高度
   changeScreenHeight ——用于动态改变视口的高度

import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  strict: true,
  state: {
    screenHeight: document.documentElement.clientHeight,
  },
  mutations: {
    changeScreenHeight (state, val) {
      state.screenHeight = val
    }
  }
})
export default store

2. 在App.vue里挂载window.onresize，也可以使用（例：watch里）

3. 在其它子页面监听视口变化，动态操作
   直接引入就可以使用，因为window.onresize是全局注册的。

注意：

1. 在项目中 window.onresize只能挂载一次，在多个页面中同时挂载 window.onresize时，只有其中一个 window.onresize会起作用。
2. mutations是唯一更改store的地方，更改store里的screenHeight，必须在mutations里定义函数，在需要更改store的地方调用执行。
3. 引入store以后，直接就可以使用，App.vue页面挂载的onresize监听是全局的。

参考：
https://blog.csdn.net/xuaner8786/article/details/81565219