如何使用 Vuetify 在图标和文本字段之间创建空间答案

【问题标题】：How to create space between icon and text field with Vuetify如何使用 Vuetify 在图标和文本字段之间创建空间
【发布时间】：2020-05-30 14:22:44
【问题描述】：

我的用户名部分有以下代码：

<v-text-field
         prepend-icon="fas fa-user"
         height="60px"
         placeholder="Username"
         outlined
></v-text-field>

如何在用户图标和文本字段之间创建空间？

当我在这里的时候，我不妨也问一下如何使输入字段的宽度适应屏幕的宽度？现在由于某种原因它非常小。

【问题讨论】：

【解决方案1】：

您需要在 prepend 插槽上添加图标，然后添加 margin-x

<v-text-field
  label="Regular"
  solo
  >
  <template v-slot:prepend>
    <v-icon class="mx-5">mdi-account</v-icon>
  </template>
</v-text-field>

【讨论】：