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

Question

我想使用人字形图标 open/close Vuetify v-navigation-drawer。如何将此图标粘贴到导航抽屉的边缘（其中 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

这很神奇：

视觉：

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

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

How to attach a handlebar to your navigation-drawer

navigation-drawer

vue.js

vuetify.js