Показывать значок всплывающей подсказки рядом с надписью текстового поля с помощью Vuetify - PullRequest
Новая
       41

Показывать значок всплывающей подсказки рядом с надписью текстового поля с помощью Vuetify

0 голосов
/ 06 февраля 2020

Я использую всплывающую подсказку компонента vuetify. Но я не уверен, как реализовать это прямо рядом с этикеткой.

Вот так у меня сейчас. 

<v-tooltip right>
  <v-icon slot="activator" dark color="primary">info</v-icon>
  <span>Please enter the user information correctly.</span>
</v-tooltip>
<v-text-field label="Information" v-model="dummy.info"> </v-text-field>

Image 1

Я хочу, чтобы значок всплывающей подсказки находился рядом с информационной меткой. Подскажите пожалуйста, как мне этого добиться.

Обновление 1 

<v-text-field label="Information" v-model="dummy.info">
 <template v-slot:append>
  <v-icon slot="activator" dark color="primary">info</v-icon>
  <span>Please enter the user information correctly.</span>
 </template>
</v-text-field>

Image 2

Обновление 2 

<v-text-field
  v-model="dummy.info"
  label='Information'
  append-icon="info"
  suffix="Please enter the user information correctly."
/>

Image 3

1 Ответ

1 голос
/ 06 февраля 2020

Вы можете добавить вещи в v-text-field, используя слот append.

https://vuetifyjs.com/en/components/text-fields#api

<v-text-field>
  <template v-slot:append>
    <v-icon slot="activator" dark color="primary">info</v-icon>
    <span>Please enter the user information correctly.</span>
  </template>
</v-text-field>

Для Vuetify 1.xx 

<v-text-field
  v-model="dummy.info"
  label="Information"
  append-icon="info"
  suffix="Please enter the user information correctly."
/>

https://v1.vuetifyjs.com/en/components/text-fields#example -префиксы и суффиксы https://v1.vuetifyjs.com/en/components/text-fields#example -икон

...