如何从扩展面板（Vuetify）中删除阴影？答案

【问题标题】：How can I remove shadow from expansion panel (Vuetify)?如何从扩展面板（Vuetify）中删除阴影？
【发布时间】：2019-11-30 18:13:44
【问题描述】：

我想从 Vuetify 扩展面板中移除阴影。目前，它看起来像这样：

我的代码如下所示：

  <v-layout wrap justify-space-between>
    <v-flex xs12 pb-1>
      <v-card>
        <v-container pa-2>
          <v-expansion-panel expand pa-0>
            <v-expansion-panel-content>
              <template v-slot:header>
                <div>
                  {{ $t("var1") }}
                </div>
              </template>
              <v-layout row wrap>
                <v-flex xs12>
                  <v-text-field
                    class="right-input"
                    :label="$t('var2')"
                    value="600.00"
                    suffix="$"
                    disabled
                    flat
                  ></v-text-field>
                </v-flex>
              </v-layout>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-container>
      </v-card>
    </v-flex>
  </v-layout>

是否可以从扩展面板中移除阴影？我尝试在标签中添加“flat”，但没有解决。我的目标是，在扩展时，它看起来像一张平面卡。谢谢！ :)

【问题讨论】：

我其实是想去掉所有边框，让面板完全平整

标签： vue.js vuetify.js

【解决方案1】：

您可以在v-expansion-panel 上设置elevation-0 类。

这是工作示例：https://codepen.io/anon/pen/oKjRpm?editors=1010

我宁愿避免更改 CSS，因为它会删除所有页面上所有扩展面板上的所有边框和阴影。

【讨论】：

是的，以前的解决方案也可以，但是这个不修改 CSS 更好:)
还有什么方法可以在不改变CSS样式的情况下修改header左右边距吗？
您可以使用Spacing helpers。 vuetifyjs.com/en/framework/spacing
这似乎不适用于 vuetify 2.x。有什么建议吗？
对于尝试使用 Vuetify 2.x 的人，我发现的解决方法是： .v-expansion-panel:before { box-shadow: none !important; }

【解决方案2】：

在 Vuetify v.2 中，您可以在 v-expansion-panels 中使用属性 flat。记录在这里：https://vuetifyjs.com/en/api/v-expansion-panels/#flat

<v-expansion-panels flat>
    <v-expansion-panel >
      <v-expansion-panel-header>
        header
      </v-expansion-panel-header>
      <v-expansion-panel-content>
        Content
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>

【讨论】：

【解决方案3】：

使用 Veutify 2，以下 css 可以完成这项工作。

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

【讨论】：

【解决方案4】：

将这行代码放入你的 CSS 中：

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

【讨论】：

完美！谢谢：D