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

Question

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

有没有办法禁用阴影或强制对齐？左边：12px 直接在元素的样式上指定，因此 CSS 不起作用。

我已经尝试过，但没有运气：

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

https://codepen.io/RuttyJ/pen/BevNmy?editors=1010

有什么想法吗？

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

这实现了效果，但需要将全局级别的菜单微移覆盖为 0px！重要。

Answer 1

您可以使用

content-class

，例如：

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

Answer 2

您可以使用

elevation

指令来删除阴影。

只需将

elevation="0"

添加到您的元素即可。

https://vuetifyjs.com/en/styles/elevation

Answer 3

要删除阴影，您只需覆盖

.v-menu__content

的样式即可。在某些 CSS 中：

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

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

话虽如此，我认为从头开始制作侧边栏菜单比尝试将本来不应该成为侧边栏的组件转换为侧边栏更容易。过渡将关闭，然后还有很多。

Answer 4

您可以使用

$menu-content-elevation: 0;

。

SASS 变量

可用菜单组件SASS变量

Answer 5

我刚刚遇到了类似的问题，但菜单激活器距离页面顶部小于

12px

。

查看

VMenu

组件的源代码（通过菜单混合），您可以看到

12px

是硬编码的最小距离。我认为解决此问题的唯一方法是仅针对这些特定情况覆盖 css。

左计算

：!important

顶部计算
：left = Math.max(left, 12);我创建了一个

Vuetify Issue

来涵盖 return top < 12 ? 12 : top; 案例。

Answer 6

top

Answer 7

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

v-menu 道具不起作用，v-list 使用成功