无法删除 Vuetify 扩展面板上的填充

Question

我有一个文本输入字段，单击按钮即可显示。 当点击“KOMMENTAR HINZUFÜGEN”时，它看起来像这样：

我正在尝试去掉黑线下方的白色填充；文本字段应填满整个面板。我试图通过将 CSS 上的边距和填充设置为 0 来实现此目的，但没有成功。这是代码：

<template>
  <v-expansion-panels>
    <v-expansion-panel class="expansion-panel">
        <v-btn @click.prevent="showTextField = !showTextField" color="gray">Kommentar hinzufügen (optional)</v-btn>
        <v-text-field v-if="showTextField" v-model="comment" label="Kommentar" class="comment-field" ref="inputField" @click="$refs.inputField.focus()" autofocus></v-text-field>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<style scoped>
  .comment-field {
    width: 25em;
    height: 20em;
    margin: 0;
  }

  .expansion-panel {
    padding: 0;
  }
</style>

Answer 1

v-text-field

用于单行。

您可以将

v-textarea

与

hide-details: auto

一起使用来实现您的目标：

<script setup lang="ts">
  import {ref} from 'vue'
  const showTextField=ref(false)
  const inputField = ref(null)
  const comment = ref('')
</script>

<template>
  <v-expansion-panels>
    <v-expansion-panel class="expansion-panel">
      <v-btn @click.prevent="showTextField = !showTextField" color="gray"
        >Kommentar hinzufügen (optional)</v-btn
      >
      <v-textarea
        v-if="showTextField"
        v-model="comment"
        label="Kommentar"
        class="comment-field"
        hide-details="auto"
        ref="inputField"
        @click="$refs.inputField.focus()"
        autofocus
      ></v-textarea>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

游乐场：https://play.vuetifyjs.com/#eNptUstOwzAQ/BVjIaWVSAKCE0oruHDhyo1wcJ1Na+HYlu2EQtU/48aPsXk1buCUeGZ2d/bxeqDO8vTRmKSpgd7TzHErjCcOfG2IZGq7yql3OV3nihBRGW09OVgoj6S 0uiIRhkUtxbVyGLbTHy+w908CZLFC2aJk0sFyUghl6p4mK9IKVC1lwHNdVaD8QEYRUlnam0IL+PBQGck8dIayJoa9YcoJrWL8gnQd/h9DuGTOYTszfOhtCNp4RR64FPw9MRYatIIRZ22htyszIKfWmqL wq1lnzkd0xGyfu7bYZbshPqqy5/vLSiy0MZjfSaXWdqVHCNCJx7zMwtsytbEopy7Cas1caULkCgZphiSkm066uQoJMfRDHFxOU+9EwXEBXgmZKtjtdchjbtCdNptyPXTRPoSVS6ZREmpee0Wy1DCJu7g00TaCY2 jGHeL0GyJ/TX8xdtzyNLgZujxit4md8nNHR1+runbL4FQ/M0=