Question

需要一些帮助来确定vuetify中的导航抽屉。下面的代码库如下。因此，基本上在导航抽屉中有一个工具栏，当我单击按钮时，当导航抽屉扩展时，它不应隐藏在下面。

<div id="app">
  <v-btn @click="drawer = !drawer">Click Me</v-btn>
  <v-navigation-drawer app v-model="drawer" class="primary">
 <v-toolbar app flat>
  <v-toolbar-side-icon @click="drawer=!drawer"></v-toolbar-side-icon>
   <v-toolbar-title class="text-uppercase grey--text">
  <span class="font-weight-light">Todo</span>
   <span> Something</span>
 </v-toolbar-title>
</v-toolbar>
 <v-layout column align-center>
 <v-flex class="mt-3">
 <v-avatar size="150" class="center">
 <img src="https://randomuser.me/api/portraits/men/1.jpg">
 </v-avatar>
<p class="white--text subheading mt-2 text-xs-center">Double A</p>
     </v-flex>
      </v-layout>
 <v-list>
  <v-list-tile v-for="link in links" :key="link.text" router 
 :to="link.route"> 
  <v-list-tile-content>
<v-list-tile-title class="white--text">{{link.text}}</v-list-tile-title>
  </v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</div>

我的脚本文件在此：-

new Vue ({
  el : '#app',
  data () {
return {
  drawer: false,
  links:[
            {text:"Dashboard", route:"/"},
            {text:"My Projects", route:"/projects"},
            {text:"Team", route:"/team"}
        ],
    }
   }
 })

Answer 1

使用z-index。使该按钮5的z-index似乎有效。

<v-btn @click="drawer = !drawer" style="z-index: 5">Click Me</v-btn>

如果您不想使用z-index。另一种方法是操纵工具栏。

<v-toolbar fixed app :clipped-left="clipped" flat>
  <v-btn @click.stop="drawer = !drawer">Click Me</v-btn>
</v-toolbar>

另一种方法是根据抽屉状态在按钮上手动添加margin-left。抽屉的默认宽度为300px。这是示例https://codepen.io/Jubels/pen/rbeBJy

 <v-flex class="pl-2">
     <v-btn @click.stop="drawer = !drawer" :style="(drawer) ? 'margin-left: 300px' : 'margin-left: 0'">Click Me</v-btn>
 </v-flex>

在vuetify中展开导航抽屉时，避免按钮重叠吗？

1 个答案: