利用vue自定义指令与vuex解决移动端点击输入框，弹出键盘，底部导航被顶起问题

需求：解决移动端点击输入框，弹出键盘，底部导航被顶起问题
思路：
1、在state中定义footer： true，默认底部导航显示
2、在mutation.js action.js编写修改state.footer的代码，利用getters监视foote变化r
3、条件渲染 （v-show=“footer” ）底部导航
4、利用自定义指令v-input 监视input / textarea是否聚焦，进而改变footer
5、聚焦时，el.onfocus，修改footer的值为false，隐藏底部导航栏
6、失去焦点时， el.onblur，修改footer的值为true，显示底部导航栏

App.vue中

HTML部分：

<div v-show="footer">
    <Footer/>
</div>

js部分：

<script>
import Vue from 'vue'
import store from './store/index.js'
import Footer from './components/FooterGuide/Footer'
import {mapGetters} from 'vuex'
export default {
  name: 'App',
  components: {
    Footer
  },
  computed: {
    ...mapGetters([
      'footer'
    ])
  },
}
Vue.directive('input', {
  inserted: function (el) {
    el.onfocus = function () {
      store.dispatch('footer', false) // 聚焦时，隐藏底部导航
    }
    el.onblur = function () {
      store.dispatch('footer', true) // 失去焦点时，显示底部导航
    }
  }
})
</script>

指令要在外部定义成全局的，才可以在其他组件使用

含 input / textarea 和底部导航的vue

在标签后加入v-input 即可

Vuex js代码

state.js

export default {
  footer: true,
}

type.js

export const FOOTER = 'footer' // 是否显示导航栏，用于解决键盘将导航撑起的问题

mutations.js

import * as types from './types'
export default {
  [types.FOOTER]: (state, data) => {
    state.footer = data
  }
}

action.js

import {
  FOOTER
} from './types'
export default {
  footer ({commit}, data) {
    commit(FOOTER, data)
  }
}

getters.js

export default{
  footer: state => {
    return state.footer
  }
}

自定义指令官方文档：
https://cn.vuejs.org/v2/guide/custom-directive.html

其他：
使用 import store from ‘./store/index.js’ 的原因
直接使用 this.$store.dispatch时报错

通过 import store from './store/index.js’
使用 store.dispatch 可解决