Numeric

Import Permalink to "Import"

import ProximaNumeric from 'proxima-vue/field/numeric';

Playground Permalink to "Playground"

import { ref } from 'vue';
import ProximaNumeric from 'proxima-vue/field/numeric';

const value = ref('');

<ProximaNumeric
  label="Numeric"
  placeholder="Enter code"
  v-model="value"
/>

Blink Permalink to "Blink"

По умолчанию при вводе недопустимого символа фон поля мерцает красным цветом, вы можете задать другой цвет или отключить анимацию вовсе: By default, when you enter an invalid character, the field's background blink red. You can set a different color or disable the animation altogether:

:root {
  --field-blink-rgb: 255, 0, 0;
  --field-blink-rgb-opacity: 0.15;
}

<ProximaNumeric
  :has-invalid-blink="false"
/>

Unexpected Permalink to "Unexpected"

Поле имеет отдельное событие при вводе недопустимого символа: The field triggers a custom event when an invalid character is entered:

<ProximaNumeric
  placeholder="Enter a letter"
  :has-invalid-blink="false"
  @unexpected:input="onUnexpectedInput"
/>

const onUnexpectedInput = (event) => {
  alert(`Unexpected char: ${event.inputData}`);
};

Locale Permalink to "Locale"

Компонент использует токены локализации: The component uses localization tokens:

{
  fieldUnexpectedUseNumber: "Invalid character, use numbers",
}

Extends Permalink to "Extends"

Данный компонент основан на текстовом поле и поддерживает его пропсы, события, слоты, БЭМ модификаторы и кастомные свойства. This component is based on a text field and supports its props, events, slots, BEM modifiers and custom properties.