javascript - 为什么我的v-speed-dial不与Vue页面上的其他组件重叠？(Why does my v-speed-dial not overlap other components on my Vue page?)

Question

I have got a page where there are several components, in one component I have a <v-speed-dial> with a fab button.

(我有一个页面，其中包含多个组件，在一个组件中，我有一个带有fab按钮的<v-speed-dial> 。)

When I open the speed dial it is placed under the component that's below it.

(当我打开快速拨号时，它位于其下方的组件下方。)

Here a picture so you can imagine what I am talking about.

(这是一张图片，您可以想象我在说什么。)

Here is the code:

(这是代码：)

<template>
<v-card outlined>

    <v-card-title>Selection</v-card-title>

    <v-toolbar height="80" elevation="0">
        <v-speed-dial class="mb-5" direction="bottom">

            <template v-slot:activator>
                <v-btn text fab>
                    <v-icon :color="myIcon.color" x-large>{{ myIcon.name }}</v-icon>
                </v-btn>
            </template>

            <v-btn fab small color="green">
                <v-icon color="white" x-large @click="changeStatusToUp()">mdi-chevron-up</v-icon>
            </v-btn>

            <v-btn fab small color="grey">
                <v-icon color="white" x-large @click="changeStatusToMid()">mdi-unfold-less-vertical</v-icon>
            </v-btn>

            <v-btn fab small color="red">
                <v-icon color="white" x-large @click="changeStatusToDown()">mdi-chevron-down</v-icon>
            </v-btn>

        </v-speed-dial>

    </v-toolbar>

</v-card>

And here the JavaScript code, if it matters:

(如果需要的话，这里是JavaScript代码：)

<script>

export default {
    name: "Selection",
    data() {
        return {

            myIcon: {
                name: 'mdi-unfold-less-vertical',
                color: 'grey'
            },
            colors: {
                red: 'red',
                green: 'green',
                grey: 'grey'
            }
        }
    },
    props: {},
    computed: {},
    methods: {

        changeStatusToUp() {
            this.myIcon.name = 'mdi-chevron-up'
            this.myIcon.color = 'green'
        }
        ,
        changeStatusToDown() {
            this.myIcon.name = 'mdi-chevron-down'
            this.myIcon.color = 'red'
        }
        ,
        changeStatusToMid() {
            this.myIcon.name = 'mdi-unfold-less-vertical'
            this.myIcon.color = 'grey'
        }
    }
};

Everything works as intended, if I put choose a different direction for the <v-speed-dial> to open, it shows fine, it's just hidden behind the component beneath it.

(一切都按预期工作，如果我为<v-speed-dial>打开选择其他方向，它显示得很好，它只是隐藏在其下面的组件后面。)

Any help is appreciated!

(任何帮助表示赞赏！)

  ask by Ckuessner translate from so

Answer 1

I think the problem is that your speed dial is inside a v-toolbar .

(我认为问题在于您的快速拨号盘位于v-toolbar 。)

The toolbar component is used for rendering a navigation header generally at the top of the app.

(工具栏组件通常用于在应用程序顶部渲染导航标题。)

Speed dials are floating buttons generally used at the bottom of the app.

(快速拨号是通常在应用程序底部使用的浮动按钮。)

If you remove the v-toolbar , your problem should get fixed.

(如果删除v-toolbar ，则问题将得到解决。)

EDIT: The vuetify docs here , show 2 different examples:

(编辑： 这里的vuetify文档，显示2个不同的示例：)

• One where v-btn is used inside v-toolbar

  (在v-toolbar使用v-btn一种)

• The other example is using v-speed-dial

  (另一个例子是使用v-speed-dial)

I think you ended up combining the two.

(我认为您最终将两者结合了。)

Please go through the examples given in the docs and use the correct HTML based on your requirement

(请仔细阅读文档中给出的示例，并根据您的要求使用正确的HTML)