Vuetify快速拨号的位置问题

问题描述

我想在我的应用程序中使用vuetify快速拨号组件，但定位错误越来越严重，我想要单击的是按钮，然后其他选项滑动到它的左侧，{{3} }

从上图中可以看到，它们位于左侧，但与原始的“父”按钮相距甚远，我试图制作一个codeandBox，但结果没有定论。

最后是我的组件代码，

<template>
    <v-speed-dial
        v-model="fab"
        direction="left"
        transition="slide-x-reverse-transition"
      >
        <template v-slot:activator>
          <v-btn
            v-model="fab"
            color="blue darken-2"
            dark
            fab
          >
            <v-icon v-if="fab">mdi-close</v-icon>
            <v-icon v-else>mdi-account-circle</v-icon>
          </v-btn>
        </template>
        
        <v-btn fab dark small color="green">
            <v-icon>mdi-pencil</v-icon>
        </v-btn>
        <v-btn fab dark small color="indigo">
            <v-icon>mdi-plus</v-icon>
        </v-btn>
        <v-btn fab dark small color="red">
            <v-icon>mdi-delete</v-icon>
        </v-btn>
                    
      </v-speed-dial>
</template>


<script>
export default {
    name: 'QuickSpeedDial',data() {
        return {
            fab: false,tabs: null
        }
    },computed: {
        activeFab () {
            switch (this.tabs) {
                case 'one': return { class: 'purple',icon: 'account_circle' }
                case 'two': return { class: 'red',icon: 'edit' }
                case 'three': return { class: 'green',icon: 'keyboard_arrow_up' }
                default: return {}
            }
        },}
}
</script>

解决方法

您需要按照官方网站上的说明添加样式。

...

<style>
.v-speed-dial {
  position: absolute;
}
.v-btn--floating {
  position: relative;
}
</style>

...