登录对话框剪辑在 Vuetify 的工具栏下

Posted 2023-02-23

【中文标题】登录对话框剪辑在 Vuetify 的工具栏下

【英文标题】：Login dialog cliped under toolbar in Vuetify

【发布时间】：2019-05-04 12:26:05

【问题描述】：

我想要一些对话框/面板来放置我的登录表单。顶部工具栏中将有登录按钮，单击时会在工具栏下方弹出某种类型的非模式对话框，其中包含登录表单和注册链接。类似于真正的 Google 联系人用于登录。

但我不知道如何剪辑/显示工具栏下的某些面板。我什至不知道用哪一个应该是v-dialog？我应该看起来像下面这样。我刚刚找到this，他们只是手动定位它，但无论如何它仍然是模态的，即使我将 CSS 定位正确。

【参考方案1】：

我应该像这个例子一样使用带有 slot="activator" 的 v-menu

<template>
  <v-layout row>
    <v-flex xs12 sm6 offset-sm3>
      <v-card >
        <v-card-title class="blue white--text">
          <span class="headline">Menu</span>

          <v-spacer></v-spacer>

          <v-menu bottom left>
            <v-btn
              slot="activator"
              dark
              icon
            >
              <v-icon>more_vert</v-icon>
            </v-btn>

            <v-list>
              <v-list-tile
                v-for="(item, i) in items"
                :key="i"
                @click=""
              >
                <v-list-tile-title> item.title </v-list-tile-title>
              </v-list-tile>
            </v-list>
          </v-menu>
        </v-card-title>

        <v-card-text>Lorem Ipsum</v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>