如何将车把连接到您的导航抽屉答案

【问题标题】：How to attach a handlebar to your navigation-drawer如何将车把连接到您的导航抽屉
【发布时间】：2021-03-31 16:35:54
【问题描述】：

我想使用 V 形图标来打开/关闭 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>

【问题讨论】：

Absolute 使用相对父级，不能对固定父级使用 absolute。用相对容器或更好的方法包裹导航，使用 translateX(-half the button width) 或 margin-left: -half the button width。只要导航没有设置为溢出隐藏。
@MichaelMano，很好的见解！如果您可以将您的评论添加为答案，并将代码放置在正确的空间中，那将很有帮助。
@MichaelMano, seriously? position: absolute 使用最近定位的父级作为参考。定位是指具有position 值而不是static 的任何元素。其中包括relative、absolute、fixed 和sticky。请阅读the standard。
@Arthur，虽然您可以查看我用来反驳迈克尔关于如何相对于其最近定位的祖先放置项目的错误陈述的示例，如果您需要针对您的案例的具体示例，请设置 runnable minimal reproducible example，添加所有相关的应用样式规则。如果您需要类似多文件节点的在线编辑器，请使用 codesandbox.io 或类似的。
@tao，我建立了一个简单的例子：jsfiddle.net/grinjo/jw3sh9n8/75 我面临的问题：当我选择这个带有迷你变体的解决方案时，导航抽屉隐藏的溢出。

标签： vue.js vuetify.js navigation-drawer

【解决方案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;
}

【讨论】：

为我工作！很高兴我找到了你的答案。我已经摆弄太多了。