Password Input

Компонент NInput с типом "password" является базовым инструментом для ввода пароля в приложениях на Vue.js с использованием библиотеки Naive UI. Он поддерживает все стандартные свойства текстового ввода и дополнительно предоставляет возможности для управления видимостью пароля, валидацией и стилями.

Базовое использование

Для создания поля ввода пароля достаточно указать тип password в компоненте NInput:

<template>
  <n-input type="password" v-model="password" placeholder="Введите пароль" />
</template>

<script setup>
import { ref } from 'vue'

const password = ref('')
</script>

Ключевые моменты:

  • v-model связывает значение поля с переменной password.
  • placeholder позволяет добавить подсказку для пользователя.
  • Тип password скрывает введённые символы стандартным способом (точками или звёздочками).

Управление видимостью пароля

Naive UI позволяет добавлять кнопку показа/скрытия пароля с помощью свойства show-password:

<n-input
  type="password"
  v-model="password"
  placeholder="Введите пароль"
  show-password
/>

Особенности поведения:

  • При активном show-password пользователь может переключать видимость символов.
  • Кнопка встроена в компонент и наследует стили, соответствующие теме.
  • Иконки видимости автоматически адаптируются под светлую и тёмную тему.

Настройка валидации

Валидация пароля может быть реализована через комбинацию событий и реактивных переменных. Например, для проверки длины и наличия специальных символов:

<template>
  <n-input
    type="password"
    v-model="password"
    placeholder="Введите пароль"
    @blur="validatePassword"
    :status="status"
    :feedback="feedback"
  />
</template>

<script setup>
import { ref } from 'vue'

const password = ref('')
const status = ref('') // '' | 'error' | 'success'
const feedback = ref('')

function validatePassword() {
  if (password.value.length < 8) {
    status.value = 'error'
    feedback.value = 'Пароль должен быть не менее 8 символов'
  } else if (!/[!@#$%^&*]/.test(password.value)) {
    status.value = 'error'
    feedback.value = 'Пароль должен содержать хотя бы один специальный символ'
  } else {
    status.value = 'success'
    feedback.value = ''
  }
}
</script>

Объяснение:

  • Свойство status изменяет цвет рамки (error — красная, success — зелёная).
  • feedback отображает сообщение под полем ввода.
  • Событие blur используется для проверки при потере фокуса.

Интеграция с формами Naive UI

Компонент NForm и NFormItem позволяют структурировать форму с валидацией:

<template>
  <n-form :model="formState" ref="formRef">
    <n-form-item label="Пароль" path="password" :rules="rules.password">
      <n-input type="password" v-model="formState.password" show-password />
    </n-form-item>
  </n-form>
</template>

<script setup>
import { ref } from 'vue'

const formRef = ref(null)
const formState = ref({ password: '' })

const rules = {
  password: [
    { required: true, message: 'Пароль обязателен', trigger: 'blur' },
    {
      validator(rule, value) {
        if (value.length < 8) return new Error('Пароль слишком короткий')
      },
      trigger: 'blur'
    }
  ]
}
</script>

Особенности:

  • NFormItem принимает path, который связывает поле с моделью.
  • Массив rules задаёт правила валидации для каждого поля.
  • Можно использовать как встроенные проверки (required), так и кастомные через validator.

Настройка стилей и размера

NInput поддерживает стандартные свойства для кастомизации внешнего вида:

  • size: "small" | "medium" | "large"

    <n-input type="password" size="large" v-model="password" />

  • bordered: true | false — включение или отключение рамки.

    <n-input type="password" bordered={false} v-model="password" />

  • placeholder и clearable — для подсказок и кнопки очистки.

Пример с полной кастомизацией:

<n-input
  type="password"
  v-model="password"
  size="medium"
  placeholder="Пароль"
  clearable
  show-password
  bordered
/>

Использование слотов и иконок

NInput поддерживает слоты для добавления кастомных иконок:

<n-input type="password" v-model="password">
  <template #prefix>
    <n-icon><LockOutlined /></n-icon>
  </template>
  <template #suffix>
    <n-button @click="generatePassword">Сгенерировать</n-button>
  </template>
</n-input>

Пояснения:

  • prefix — иконка или текст перед полем ввода.
  • suffix — кнопка или иконка после поля, можно использовать для генерации пароля или дополнительных действий.

Работа с реактивными состояниями

Для динамического управления состоянием поля можно использовать реактивные переменные:

<template>
  <n-input
    type="password"
    v-model="password"
    :disabled="isDisabled"
    :readonly="isReadonly"
    show-password
  />
  <n-switch v-model="isDisabled" /> Отключить
  <n-switch v-model="isReadonly" /> Только чтение
</template>

<script setup>
import { ref } from 'vue'

const password = ref('')
const isDisabled = ref(false)
const isReadonly = ref(false)
</script>

Поддержка тем и адаптивность

  • Все элементы компонента автоматически подстраиваются под светлую и тёмную тему Naive UI.
  • Компонент корректно отображается на мобильных устройствах благодаря встроенной адаптивной верстке.
  • Возможна интеграция с глобальной темой, чтобы цвет рамок, текста и иконок соответствовал стилю приложения.

Этот функционал делает компонент Password Input гибким инструментом для создания защищённых и удобных форм ввода пароля с полной поддержкой реактивности, валидации и кастомизации в экосистеме Naive UI.

Оглавление