Vue.js 如何将把手连接到导航抽屉

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

我尝试用一个空的迷你变型和一个浮动操作按钮来解决这个问题，但这不符合要求（例如，无法定位正确的背景颜色，请参见图：）

mdi V形左
mdi V形右

带把手的导航抽屉：

这就产生了魔力：

Vue：

---

绝对值使用相对父级，不能将绝对值用于固定父级。使用相对容器包装导航，或者更好的方法是使用translateX（-按钮宽度的一半）或左边距：-按钮宽度的一半。只要导航没有设置为溢出隐藏。@MichaelMano，好的洞察力！如果您可以添加您的注释作为答案，并将代码放在正确的空格中，这将很有帮助。@MichaelMano<代码>位置：绝对使用最接近的父对象作为参考。我们所说的定位是指具有

位置

值的任何元素，而不是

静态

。它包括

相对的

，

绝对的

，

固定的

和

粘性的

。请阅读。@Arthur，虽然你可以看看我用来反驳Michael关于如何相对于最接近的祖先放置项目的错误陈述的示例，但如果你需要一个具体的示例，请设置一个runnable，添加所有相关的应用样式规则。如果您需要多文件节点，如在线编辑器，请使用codesandbox.io或类似工具。@tao，我构建了一个简单的示例：我面临的问题：当我使用mini-variant选择此解决方案时，导航抽屉隐藏了溢出。这对我有效！很高兴我找到了你的答案。这件事我已经做得太多了。

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

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

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