vuetify 或 css 中的输入字段

Question

如何在 vuetify 或 css 中执行图片中的操作？

Answer 1

根据 vuetify documention，您可以在输入字段前添加和附加图标。

You can add icons to the text field with prepend-icon, append-icon and append-outer-icon props.

Vuetify 使用 material design icons，因此完成您想要的设计的代码如下：

<template>
    <v-text-field
        solo
        label="Name"
        prepend-inner-icon="mdi-account"
    ></v-text-field>
</template>

或者，您可以通过在输入框获得焦点时将占位符固定为输入框内的标签来获得更现代的外观。这样做的代码是：

<template>
    <v-text-field
        outlined
        label="Name"
        prepend-inner-icon="mdi-account"
    ></v-text-field>
</template>

Answer 2

由于您希望在文本字段边框内放置图标，因此这两个适合您：

<v-text-field prepend-inner-icon="account">
</v-text-field>

<v-text-field>
     <template v-slot:prepend-inner>
         <img src="/account.svg" height="20">
      </template>
</v-text-field>

Here's 一个漂亮的图标演示。

input fields in vuetify or css