如何将车把连接到导航抽屉上

Question

我想使用v形图标打开/关闭Vuetify v-navigation抽屉。如何将此图标粘贴到导航抽屉的边缘(其中50%的图标与抽屉重叠并垂直对齐(？打开抽屉时，图标应保持在原位并随抽屉移动。

我试图用一个空的迷你变体和一个附加的浮动操作按钮来解决这个问题，但这不符合要求(例如，无法定位正确的背景颜色，请参阅图片：https://grinjo.nl/clip.jpg)。

<v-navigation-drawer
floating
v-model="rightDrawer"
right
fixed
permanent
color="transparent"
:mini-variant.sync="rightDrawer"
>
<v-btn
fab
absolute
justify="center"
left
color="white"
@click="rightDrawer = !rightDrawer"
:style="{left: 0, top: '50%', transform:'translateY(-50%)'}"
>
<v-icon v-if="rightDrawer">mdi-chevron-left</v-icon>
<v-icon v-else>mdi-chevron-right</v-icon>
</v-btn>
</v-navigation-drawer>

Answer 1

带把手的导航抽屉：https://jsfiddle.net/grinjo/jw3sh9n8/81

这发挥了神奇的作用：

Vue:

<v-btn
absolute
right
fab
@click="drawer = !drawer"
:style="{top: '50%', transform:'translate(75%, -50%)'}"
>

CSS：

.v-navigation-drawer--mini-variant, .v-navigation-drawer {
overflow: visible !important;
}