如何创建嵌套的 vuetify 导航抽屉？

Question

我有一个案例，我有一个导航抽屉，我想用其中的图标保持固定，我想要另一个导航抽屉，它可以在固定抽屉附近打开和关闭而不会重叠。我已经让导航抽屉工作了，但它实际上与整个抽屉重叠。 这是pen的链接。

new Vue({
  el: '#app',
  data() {
    return {
      actions: [{
          icon: 'android'
        },
        {
          icon: 'dashboard'
        },
        {
          icon: 'question_answer'
        },
      ],
      drawer: false
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
  <v-app id="inspire">
    <v-navigation-drawer fixed width="70">
      <v-list>
        <v-list-tile v-for="action in actions" :key="action">
          <v-icon>{{action.icon}}</v-icon>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-navigation-drawer temporary app v-model="drawer">
    </v-navigation-drawer>
    <v-toolbar fixed app class="ml-5 pl-3">
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Topics</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>more_vert</v-icon>
      </v-btn>
    </v-toolbar>
  </v-app>
</div>

同样，导航抽屉应该在固定抽屉旁边打开，而不是与它重叠。P.S.我正在使用 vuetify 1.5

Answer 1

仅使用道具是无法做到的。您可以在第二个抽屉打开时添加一些自定义 CSS...

.v-navigation-drawer--open.d2 {
    left: 70px;
    box-shadow: 0 0 0 0;
}

Codeply