利用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'