如何设置 Vuetify 2 扩展面板的高度答案

【问题标题】：How to set the elevation of a Vuetify 2 expansion panel如何设置 Vuetify 2 扩展面板的高度
【发布时间】：2020-01-15 23:49:13
【问题描述】：

如何在 Vuetify v2 中将扩展面板的高度设置为 0（移除盒子阴影）？

【问题讨论】：

海拔辅助类不适用于 v2 中的扩展面板。我还尝试通过将“box-shadow：none”添加到 v-expansion-panels、v-expansion-panel、v-expansion-panel-content 来更改 css，但这也不起作用。

【解决方案1】：

因此 Vuetify v2 海拔帮助程序类在扩展面板上不起作用。

最后，我不得不将以下 CSS 添加到我的组件中，以从扩展面板中移除 box-shadow/elevation：

.v-expansion-panel::before {
  box-shadow: none;
}

希望对某人有所帮助。

【讨论】：

【解决方案2】：

您可能需要添加flat 属性，而不是更改高度，此道具会删除扩展面板的高度和边框

您可以在v-expansion-panels API（Vuetify 2.4 版）中了解更多关于扩展面板道具的信息

另外，如果您仍然希望扩展面板之间有线条您可以在每个面板之间添加元素：<v-divider class="m-0"></v-divider> 在documentation 中查看有关扩展面板结构的更多信息通过单击带有图标< > 的view source 选项卡

【讨论】：