Question

我有一个页面，其中包含多个组件，在一个组件中，我有一个带有fab按钮的<v-speed-dial>。当我打开快速拨号时，它位于其下方的组件下方。

这里有一张图片，您可以想象我在说什么。

代码如下：

<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>

如果需要的话，这里是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'
        }
    }
};

一切正常，如果我选择为<v-speed-dial>打开一个不同的方向，它显示得很好，它只是隐藏在它下面的组件后面。

感谢您的帮助！

Answer 1

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

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

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

如果您删除了v-toolbar，您的问题应该会得到解决。

编辑：vuetify文档here，显示2个不同的示例：

在v-btn中使用v-toolbar的地方
另一个示例是使用v-speed-dial

我想您最终将两者结合了。请仔细阅读文档中给出的示例，并根据您的要求使用正确的HTML

为什么我的v-speed-dial不与Vue页面上的其他组件重叠？

1 个答案: