Vue filepond .更改尺寸

Question

我使用的是Vue Filepond，我想让它填充它的容器的高度。我也在用武帝。

如果我尝试设置CSS中的值，它将被76px覆盖。

fill-height正在使文件池外容器填充该区域，但不填充其内容。

<template>
  <file-pond
    class="fill-height"
    name="filePond"
    height='100%'
    ref="filePond"
    label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
    accepted-file-types=".csv"
    v-bind:files="files"
    @processfile="updateUploadedFiles"
    @error="errorLoadingFile"
    :server="serverOptions"
    :allow-multiple="true"
    :allow-process="false"
    :allow-revert="false"
    :drop-on-page="true"
    :drop-on-element="false"
    :maxParallelUploads="3">
  </file-pond>
</template>

我试过把造型设置成这样，但这并没有什么不同。

.filepond--root,
.filepond--root .filepond--drop-label {
  height: 200px;
}

Answer 1

我的解决办法：

• 包围在vuetify v卡
• 上使用filepond使用的背景色，使用
• Set min和工作文件区(文件根)的最大高度(文件根)(不对CSS文件进行范围)

。

     <template>
      <v-card flat class="pa-0" style="background-color: #f1f0ef;height: 421px;">
        <file-pond
        ref="pond"
        name="filePondImages"
        @init="handleFilePondInit"
        :files="imagenesAnuncioFilePond"
        @processfile="imagenesAnuncioOnProcess"
        @removefile="imagenesAnuncioOnDelete"
        />
      </v-card>
    </template>
    
    <style lang="scss">
    .filepond--root {
      display: flex;
      flex: column;
      min-height: 421px;
      max-height: 421px;
    }...