Vuetify v-navigation-drawer无法溢出显示展开切换按钮问题

问题说明 #

开发时需要给v-navigation-drawer添加一个可超出抽屉自身边界的展开折叠切换按钮，组件默认自带overflow: hidden属性会裁剪超出容器的元素。
最初尝试通过如下CSS覆盖样式未生效，按钮依然被容器裁剪：

.v-navigation-drawer {
  overflow: auto;

  .v-navigation-drawer__content {
    overflow-x: auto;
  }
}

问题原因 #

• 样式覆盖值错误：overflow: auto依然会触发容器裁剪逻辑，无法实现子元素溢出显示，必须使用overflow: visible
• 作用域样式限制：如果样式写在带scoped标记的style块中，普通类选择器无法穿透Vuetify组件的内置样式
• 裁剪节点遗漏：除了抽屉根容器和内容容器，组件内置的遮罩层容器也会受溢出属性影响，未处理会导致页面交互异常

修复代码 #

如果使用scoped样式，需要通过深度选择器穿透组件样式，完整覆盖代码如下：

/* 穿透修改抽屉根容器溢出属性 */
:deep(.v-navigation-drawer) {
  overflow: visible !important;
}
/* 修改内容容器溢出属性 */
:deep(.v-navigation-drawer__content) {
  overflow: visible !important;
}
/* 修正遮罩层定位，避免溢出遮挡页面其他可交互元素 */
:deep(.v-navigation-drawer .v-navigation-drawer__scrim) {
  inset-inline-start: 0 !important;
  width: 100% !important;
}

按钮定位参考 #

将切换按钮放在抽屉容器内部，使用绝对定位设置负偏移即可实现按钮半露在抽屉外侧的效果，示例样式：

.drawer-toggle-btn {
  position: absolute;
  top: 50%;
  /* LTR布局下直接写right: -20px即可，inset-inline-end适配RTL布局 */
  inset-inline-end: -20px;
  transform: translateY(-50%);
  z-index: 10;
}

注意事项 #

• 若上述样式添加后仍不生效，可通过组件的content-class、class属性给抽屉绑定自定义类名，再基于自定义类名写样式，提高选择器优先级
• 若使用了rail、temporary等内置抽屉模式，注意检查组件是否自动添加了内联overflow样式，可通过!important强制覆盖
• 若项目使用Vue2.6及以下版本，深度选择器可替换为::v-deep或/deep/，写法和:deep()一致

内容的提问来源于stack exchange，提问作者Augustin Riedinger