vux-ui 用了tabbar后怎么使用全屏组件

Question

问题

项目用了vux-ui ，使用tabbar 来导航。 后来在子路由里面使用全屏组件发现组件fixed 层级设置再怎么高，都无法覆盖住tabbar ，请问如何解决？

代码

<template>
  <div id="app" style="height: 100%">
    <drawer>
      <view-box>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </view-box>
    </drawer>
    <tabbar>
      <tabbar-item link="/index" :selected="$route.path == '/index'">
        <span slot="icon" class="iconfont icon-home"></span>
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item link="/storeCenter" :selected="$route.path == '/storeCenter'">
        <span slot="icon" class="iconfont icon-store"></span>
        <span slot="label">门店</span>
      </tabbar-item>
      <tabbar-item link="/explore" :selected="$route.path == '/explore'">
        <span slot="icon" class="iconfont icon-search"></span>
        <span slot="label">发现</span>
      </tabbar-item>
      <tabbar-item show-dot link="/me" :selected="$route.path == '/me'">
        <span slot="icon" class="iconfont icon-wode"></span>
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

截图

Answer 1

直接tabbar控件用一个控制变量来显示隐藏。
`<tabbar class="vux-demo-tabbar" icon-class="vux-center" v-show="!isTabbarDemo" slot="bottom">

      <tabbar-item :link="{path:'/'}" :selected="route.path === '/'">
        <span class="demo-icon-22 vux-demo-tabbar-icon-home" slot="icon" style="position:relative;top: -2px;"></span>
        <span slot="label">Home</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/demo'}" :selected="isDemo" badge="9">
        <span class="demo-icon-22" slot="icon"></span>
        <span slot="label"><span v-if="componentName" class="vux-demo-tabbar-component">{{componentName}}</span><span v-else>Demos</span></span>
      </tabbar-item>
      <tabbar-item :link="{path:'/project/donate'}" :selected="route.path === '/project/donate'" show-dot>
        <span class="demo-icon-22" slot="icon"></span>
        <span slot="label">Donate</span>
      </tabbar-item>
    </tabbar>`

Answer 2

||判断测试可以

<tabbar v-show="$route.path == '/index' || $route.path == '/storeCenter' || $route.path == '/explore' || $route.path == '/me'" slot="bottom">
      <tabbar-item link="/index" :selected="$route.path == '/index'">
        <span slot="icon" class="iconfont icon-home"></span>
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item link="/storeCenter" :selected="$route.path == '/storeCenter'">
        <span slot="icon" class="iconfont icon-store"></span>
        <span slot="label">门店</span>
      </tabbar-item>
      <tabbar-item link="/explore" :selected="$route.path == '/explore'">
        <span slot="icon" class="iconfont icon-search"></span>
        <span slot="label">发现</span>
      </tabbar-item>
      <tabbar-item show-dot link="/me" :selected="$route.path == '/me'">
        <span slot="icon" class="iconfont icon-wode"></span>
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>

Answer 3

good,成功实现