Поле ввода

Компонент поля ввода: поддерживает текст, пароль, подсчёт символов и другие возможности.

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

Текущее значение:

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <!-- Базовое поле ввода -->
  <LhInput v-model="value" placeholder="Введите текст" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <!-- Базовое поле ввода -->
  <LhInput v-model="value" placeholder="Введите текст" />
</template>

Различные типы

vue

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
const password = ref('')
const clearable = ref('Заполнено')
</script>

<template>
  <LhInput v-model="text" placeholder="Текстовый ввод" />
  <LhInput v-model="password" type="password" placeholder="Введите пароль" show-password />
  <LhInput v-model="clearable" placeholder="Очищаемый ввод" clearable />
</template>

vue

<script>
export default {
  data() {
    return {
      text: '',
      password: '',
      clearable: 'Заполнено',
    }
  },
}
</script>

<template>
  <LhInput v-model="text" placeholder="Текстовый ввод" />
  <LhInput v-model="password" type="password" placeholder="Введите пароль" show-password />
  <LhInput v-model="clearable" placeholder="Очищаемый ввод" clearable />
</template>

Отключённое состояние

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" disabled placeholder="Отключённое поле" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" disabled placeholder="Отключённое поле" />
</template>

Подсчёт символов

0/10

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="Не более 10 символов" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="Не более 10 символов" />
</template>

Слоты

vue

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

Пользовательская тема

vue

<script setup lang="ts">
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <!-- Тема настраивается через theme-vars -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="Поле ввода «сине-белый фарфор»" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

export default {
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <!-- Тема настраивается через theme-vars -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="Поле ввода «сине-белый фарфор»" />
  </LhConfigProvider>
</template>

Быстрая разметка sx

Свойство sx позволяет быстро задать отступы без написания дополнительного CSS.

vue

<script setup lang="ts">
</script>

<template>
  <!-- Отступ сверху 2 -->
  <LhInput placeholder="Отступ сверху 2" :sx="{ mt: 2 }" />
  <!-- Отступ по горизонтали 1, снизу 3 -->
  <LhInput placeholder="Отступ по горизонтали 1, снизу 3" :sx="{ mx: 1, mb: 3 }" />
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Отступ сверху 2 -->
  <LhInput placeholder="Отступ сверху 2" :sx="{ mt: 2 }" />
  <!-- Отступ по горизонтали 1, снизу 3 -->
  <LhInput placeholder="Отступ по горизонтали 1, снизу 3" :sx="{ mx: 1, mb: 3 }" />
</template>

sx рассчитывается на базе 8px: mt: 2 → marginTop: 16px. Полный список свойств см. в Быстрая разметка sx.

Интернационализация

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <!-- Языковой пакет внедряется через ConfigProvider -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">Переключить язык</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhInput, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <!-- Языковой пакет внедряется через ConfigProvider -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="toggleLocale">Переключить язык</LhButton>
  </LhConfigProvider>
</template>

Размер и только для чтения

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="Поле только для чтения" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="Поле только для чтения" />
</template>

Иконки префикса и суффикса

Иконки префикса и суффикса задаются через prefix-icon / suffix-icon, в качестве значения принимается имя встроенной иконки LhIcon (например, search, date).

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="Префикс-иконка" />
  <LhInput v-model="value" suffix-icon="date" placeholder="Суффикс-иконка" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="Префикс-иконка" />
  <LhInput v-model="value" suffix-icon="date" placeholder="Суффикс-иконка" />
</template>

Нативные свойства и автоматическая высота

Нативные атрибуты autocomplete, native-type, autofocus, minlength и другие прокидываются во внутреннее поле ввода; autosize используется, чтобы высота textarea автоматически подстраивалась под содержимое.

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="Автофокус" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Автоматическая высота" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="Автофокус" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Автоматическая высота" />
</template>

Input API

Props

Свойство	Описание	Тип	По умолчанию
modelValue	Привязанное значение	`string`	—
type	Тип поля ввода	`"number" \| "text" \| "textarea" \| "password" \| "email" \| "url" \| "tel" \| "date" \| "time"`	`'text'`
size	—	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	Отключённое состояние	`boolean`	`false`
readonly	Состояние только для чтения	`boolean`	`false`
placeholder	Текст плейсхолдера	`string`	—
maxlength	Максимальная длина ввода	`number`	—
minlength	—	`number`	—
showWordLimit	Показывать ли подсчёт символов	`boolean`	`false`
clearable	Можно ли очистить поле	`boolean`	`false`
prefixIcon	Имя иконки префикса (встроенная иконка LhIcon)	`LhIconName`	—
suffixIcon	Имя иконки суффикса (встроенная иконка LhIcon)	`LhIconName`	—
autofocus	—	`boolean`	`false`
autocomplete	—	`string`	—
nativeType	—	`string`	—
autosize	—	`boolean \| { minRows?: number; maxRows?: number; }`	`false`
resize	—	`"none" \| "both" \| "horizontal" \| "vertical"`	`'vertical'`
name	—	`string`	—
rows	—	`number`	—
tabindex	—	`string \| number`	—
form	—	`string`	—
inputStyle	—	`{ [x: string]: string; }`	—
label	—	`string`	—
themeVars	Переменные темы на уровне компонента, переопределяют конфигурацию ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Узор фона на уровне компонента, переопределяет конфигурацию ConfigProvider	`string`	—
sx	Свойства быстрой разметки sx	`LhSxProps`	—

Events

Событие	Описание	Параметры обратного вызова
update:modelValue	Событие обновления значения	`(value: string)`
input	Событие ввода	`(value: string)`
change	Событие изменения значения	`(value: string)`
focus	Событие получения фокуса	`(event: FocusEvent)`
blur	Событие потери фокуса	`(event: FocusEvent)`
clear	Событие очистки	—
keydown	Нативное событие keydown	`(event: KeyboardEvent)`

Slots

Слот	Описание
prefix	Содержимое в начале поля ввода
suffix	Содержимое в конце поля ввода

Определения типов

Структуры TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/input/src/types.ts и исходников @lh-ui/share/core/*; нажмите на каждый пункт, чтобы развернуть полное определение; описания свойств см. в таблице Props выше):

LhInputType

export type LhInputType = typeof LH_INPUT_TYPE_CONST[keyof typeof LH_INPUT_TYPE_CONST]

LhInputSize

/**
 * Размер Input
 */
export type LhInputSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhInputState

export type LhInputState = typeof LH_INPUT_STATE_CONST[keyof typeof LH_INPUT_STATE_CONST]

LhInputProps

/**
 * Интерфейс Props компонента Input
 */
export interface LhInputProps {
  modelValue?: string
  type?: LhInputType
  size?: LhInputSize
  disabled?: boolean
  readonly?: boolean
  placeholder?: string
  maxlength?: number
  minlength?: number
  showWordLimit?: boolean
  clearable?: boolean
  /** Имя иконки префикса (встроенная иконка LhIcon, например `search`) */
  prefixIcon?: LhIconName
  /** Имя иконки суффикса (встроенная иконка LhIcon, например `date`) */
  suffixIcon?: LhIconName
  autofocus?: boolean
  autocomplete?: string
  nativeType?: string
  autosize?: boolean | { minRows?: number; maxRows?: number }
  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
  name?: string
  rows?: number
  tabindex?: number | string
  form?: string
  inputStyle?: Record<string, string>
  label?: string
  /** Переменные темы на уровне компонента, переопределяют конфигурацию ConfigProvider */
  themeVars?: Record<string, string>
  /** Узор фона на уровне компонента, переопределяет конфигурацию ConfigProvider */
  bgPattern?: string
  /** Свойства быстрой разметки sx */
  sx?: LhSxProps
}

LhIconName _{(из @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Поле ввода ​

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

Различные типы ​

Отключённое состояние ​

Подсчёт символов ​

Слоты ​

Пользовательская тема ​

Быстрая разметка sx ​

Интернационализация ​

Размер и только для чтения ​

Иконки префикса и суффикса ​

Нативные свойства и автоматическая высота ​

Input API ​

Props ​

Events ​

Slots ​

Определения типов ​