底部菜单隐藏

聊聊上篇随笔底部菜单隐藏 是vue做的移动端

先在mins.js里面写上事件总线

// 实例化一个事件总线对象
Vue.prototype.$bus = new Vue()

在App.vue文件里面写上

<template>
  <div>
    <!-- 这个就是你底部菜单 -->
    <FooterNav v-if="isShow"></FooterNav>
    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>

<script>
import FooterNav from \'./FooterNav\'
export default {
  components: {
    FooterNav
  },
  data() {
    return {
      // 底部菜单显示
      isShow: true
    }
  },
  created() {
    //   订阅让底部菜单隐藏的指令
    this.$bus.$on(\'footernav\', show => {
      this.isShow = show
    })
  }
}
</script>

 

在组件你想隐藏就写上下面这段代码 你不在这个组件必须要还原一下底部菜单的显示 

  created(){
    // 发布一个让底部菜单隐藏的指令
    this.$bus.$emit(\'footernav\',false)
  }
  // 组件注销前执行方法
  beforeDestroy(){
     // 发布一个让底部菜单显示的指令
    this.$bus.$emit(\'footernav\',true)
  }