Question

在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树走，我将行高设置为更小，清除了所有的边距和填充等。没有运气。

Answer 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');
    }

Answer 2

我为condensed创建了一个v-expansion-panels 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>

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

2 个答案: