如何解决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>
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。