自定义扩展面板__标题高度答案

【问题标题】：Customizing expansion-panel__header height自定义扩展面板__标题高度
【发布时间】：2018-11-11 16:25:05
【问题描述】：

在 Vuetify 1.3.0 中工作，尝试制作比默认更薄的扩展面板。

默认情况下，它似乎渲染了相当大的 ime，但我找不到合适的规则来调整元素高度。

我尝试调整页眉样式填充（默认为 12px 24px），但这只是改变了我的页眉在整个面板内容中的位置，所以很明显其他东西正在设置父元素高度，我只是无法追踪它。

我现在的组件（简化）如下：

<template>
  <section>
    <v-expansion-panel>
      <v-expansion-panel-content>
        <header class='layout row justify-spaces ma-0' slot='header'>
          <span class='caption flex' v-text='title'/>
        </header>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </section>
</template>
<style>
  .v-expansion-panel__header: {
      padding: 6px 12px;
  }
</style>

元素的实际高度不知何故被设置为 48px，但它是灰色的，这意味着它是在运行时计算的，我找不到是什么因素造成的。走上 DOM 树，我将行高设置为小得多，清除了所有边距和填充等。没有运气。

【问题讨论】：

标签： css vuetify.js

【解决方案1】：

你可以在生命周期中修改样式

    mounted() {
        // Reformat vuetify Headers
        $('.v-expansion-panel__header').toggleClass('pl-2 pa-0 ma-0', true);
        $('.v-expansion-panel__header').css('min-height' ,'30px');
    }

【讨论】：

【解决方案2】：

我为v-expansion-panels 创建了一个condensed CSS 类：

<template>
  ...
  <v-expansion-panels class="condensed" ...>
    ...
  </v-expansion-panels>
  ...
</template>
<style scoped>
.v-expansion-panels.condensed .v-expansion-panel-header {
  padding-top: 2px;
  padding-bottom: 2px;
  min-height: auto;
}
.v-expansion-panels.condensed
  .v-expansion-panel--active
  .v-expansion-panel-header {
  padding-top: 8px;
  padding-bottom: 8px;
}
.v-expansion-panels.condensed .v-expansion-panel--active:not(:first-child),
.v-expansion-panels.condensed .v-expansion-panel--active + .v-expansion-panel {
  margin-top: 4px;
}
</style>

【讨论】：