Question

我有一个步进器。在第3步中，有一个我要添加v菜单的按钮。当我添加v菜单时，按钮消失。这是我的代码：

<template>


.
.
.
.
<v-stepper-step :complete="e6 > 3" step="3" editable>Subrack Configuration</v-stepper-step>

<v-stepper-content step="3">
  <v-card color="grey lighten-4" class="mb-5" height="660px">
    <app-tabs></app-tabs>
      <v-flex xs12 sm6 offset-sm3>
        <div v-if="show6U">
          <v-spacer></v-spacer>

          <v-container
            fluid
            grid-list-xl
          >
           <v-layout row wrap class="light--text">
            </v-layout>
          </v-container>
          <app-toppic class="topPic"></app-toppic>
            <v-menu
              transition="slide-y-transition"
              bottom
              v-model="hasanGholi"
            >
              <v-btn slot="activator" color="white"><v-spacer></v-spacer> 1‍ <v-spacer></v-spacer><v-divider color="black" vertical></v-divider> ‌‌▾ </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>
        </div>
      </v-flex>
  </v-card>
</v-stepper-content>
.
.
.
.
</template>

<script>
import TOPPic from "../../components/Subrack/TOP/TOPPic";
import Tabs from "../Tabs";
export default {
data() {
  return {
    hasanGholi: true,
    e6: 1,
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' }
    ]
  }
},
components: {
  appToppic: TOPPic,
  appTabs: Tabs
},    
}
</script>

<style scoped>
.topPic{
position: relative;
right: 700px;
top: -150px;
}
</style>

请注意，按钮为<v-btn slot="activator" color="white"><v-spacer></v-spacer> 1‍ <v-spacer></v-spacer><v-divider color="black" vertical></v-divider> ‌‌▾ </v-btn>。

当我添加v菜单<v-menu transition="slide-y-transition" bottom v-model="hasanGholi">时，该按钮消失。当我删除v-menu标签时，该按钮返回到屏幕。我不知道为什么按钮会消失，所以我想知道如何在不消失的情况下将菜单添加到按钮？

Answer 1

我在CSS中使用了position: absolute;，而应该使用position: relative;并解决了问题

向按钮添加v菜单使其在Vuetify中消失

1 个答案: