Vuetify - вводные подсказки и сообщения

Vuetify - популярный UI-фреймворк для приложений Vue.

В этой статье мы рассмотрим, как работать с фреймворком Vuetify.

Подсказки по вводу

Компонент v-input принимает свойство hint, чтобы мы могли добавить подсказку для ввода.

Например, мы можем написать:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input hint="a hint" persistent-hint :messages="messages">Input</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    messages: [],
  }),
};
</script>

Мы добавили опору persistent-hint, чтобы подсказка оставалась неизменной.

Также у нас есть опора hint с текстом подсказки.

Сообщение об успехе

Мы можем добавить сообщение об успешном выполнении с помощью опоры success-messages:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input :success-messages="['Success']" success disabled>Input</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Мы устанавливаем массив в опору success-messages.

Ошибка

Мы можем отображать ошибки с помощью error-messages prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input :error-messages="['an error occurred']" error disabled>Input</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Множественные ошибки

Опора error-count позволяет нам добавлять несколько ошибок во входные данные:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input
          error-count="2"
          :error-messages="['an error', 'another error']"
          error
          disabled
        >Input</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

У нас есть свойство error-count для установки количества ошибок и свойство error-messages для установки массива сообщений об ошибках.

Правила

Правила проверки для формы могут быть установлены с помощью свойства rules:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-text-field :rules="rules"></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rules: [
      (value) => !!value || "Required.",
      (value) => (value || "").length <= 10 || "Max 10 characters",
    ],
  }),
};
</script>

Свойство rules - это массив с функциями, который при необходимости возвращает сообщение об ошибке.

value имеет значение, которое мы ввели.

Автоматическое скрытие деталей

Свойство hide-details позволяет нам автоматически скрывать сообщения.

Например, мы можем написать:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-text-field label="Main input" :rules="rules" hide-details="auto"></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rules: [
      (value) => !!value || "Required.",
      (value) => (value || "").length <= 10 || "Max 10 characters",
    ],
  }),
};
</script>

У нас есть массив rules с правилами валидации.

hide-details установлено значение auto, чтобы скрыть ошибки проверки, если их нет.

Заключение

Мы можем добавлять подсказки ввода и сообщения проверки с помощью текстовых полей ввода Vuetify.