有没有办法去除阴影，或者强制 vuetify 菜单与屏幕左侧完全对齐？

Question

我正在尝试在侧边栏导航中使用 vuetify 菜单。我希望菜单与屏幕左侧完美对齐。相反，我得到的是菜单坚持将其放置在距屏幕边缘 12px 的位置并破坏我的对齐方式。

有没有办法禁用阴影或强制对齐？left: 12px 是直接在元素的样式上指定的，所以 CSS 没有效果。

我试过这个，但没有运气：

<v-menu offset-y nudge-left="-12" flat>

有任何想法吗？

更新：取得了一些进展：https : //codepen.io/anon/pen/WBLMob

这实现了效果，但需要将全局级别的菜单轻推覆盖到 0px ！important。

Answer 1

你可以使用content-class像：

<v-menu content-class="elevation-0">

Answer 2

您可以使用该elevation指令移除阴影。

只需添加elevation="0"到您的元素。

Answer 3

要删除阴影，您只需覆盖的样式即可.v-menu__content。在某些 CSS 中：

.v-menu__content {
    box-shadow: none;
}

左对齐可以通过 javascript 设置样式来完成。

话虽如此，我认为从头开始制作侧边栏菜单比尝试将本来不是侧边栏的组件转换为侧边栏更容易。过渡将会关闭，而很多事情都会继续。