对话框中的导航抽屉，多个v内容？答案

【问题标题】：navigation drawer in dialog, multiple v-content?对话框中的导航抽屉，多个v内容？
【发布时间】：2018-09-08 03:15:02
【问题描述】：

我只是在查看 vuetify，我想添加一个包含 v-navigation-drawer 的对话框。

我需要如何构造对话框内的布局以在对话框中实现与 v-navigation-drawer 相同的效果（左侧是菜单，右侧是内容）。

这就是我现在的标记：

v-app
  v-dialog
    v-toolbar
    v-navigation-drawer
      v-list
        .. menuitems
    v-content
      (content here is under the left menu not on the right side as on my screenshot)
  v-content
    v-container

https://imgur.com/a/dRTpC

【问题讨论】：

标签： vuetify.js

【解决方案1】：

这可能不是最干净的解决方案，但可能是这样的：

new Vue({
  el: '#app',
  data () {
      return {
        dialog: null,
        notifications: false,
        sound: true,
        widgets: false
      }
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />

<div id="app">
  <v-app id="inspire">
    <v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
    <v-dialog v-model="dialog"  transition="dialog-bottom-transition" width="80%" fullscreen hide-overlay >
      <v-card>
        <v-toolbar dark class="primary">
          <v-btn icon @click.native="dialog = false" dark>
            <v-icon>close</v-icon>
          </v-btn>
          <v-toolbar-title>Settings</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn dark flat @click.native="dialog = false">Save</v-btn>
          </v-toolbar-items>
        </v-toolbar>
         <v-navigation-drawer
                                        permanent
                                        absolute
                                        left
                                        width="250"
                                        class='mt-5'
                                        height=""

                                >
                                    <v-list light one-line class="grey pa-1">
                                        <v-list-tile>
                                            <v-list-tile-content>
                                                <v-list-tile-title class="white--text subheading">
                                                    HEADER
                                                </v-list-tile-title>
                                            </v-list-tile-content>
                                        </v-list-tile>
                                    </v-list>
                                    <v-list class="pt-0" dense>
                                        <v-divider></v-divider>
                                        <v-list-tile >
                                              Lorem ipsum lorem ipsum
                                        </v-list-tile>
                                    </v-list>
                                </v-navigation-drawer>
          <v-flex class="text-xs-center">
                <h3 class="headline mb-0">Kangaroo Valley Safari</h3>
                <div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
          </v-flex>
 
      </v-card>
    </v-dialog>
  </v-app>
</div>

【讨论】：