vue.js - 如何从扩展面板 (Vuetify) 中删除阴影？

Question

我想从 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”，但没有解决。我的目标是，在扩展的同时，它看起来像一张平面卡片。谢谢! :)

Answer 1

在 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>