Vue Input Facade

Оглавление

• Установка Vue Input Facade в Nuxt.js
• Токены маски
• Создание маски
  • Доступ к необработанному значению

Иногда на сайтах требуется установить маску в Input элементы форм. Маска позволяет задать некий шаблон вводимых пользователем данных и помочь ему не ошибиться при вводе символов. Например маски используют для ввода номеров кредитных карт или телефонных номеров. Во Vue.js я нашел довольно популярный и удобный плагин Vue the Mask [npm] [Github] — однако данный плагин уже более трех лет не обновляется и судя по всему, автор потерял к нему какой-либо интерес. К тому же, у этого плагина есть перечень крайне неприятных багов…

В процессе изучения Issue этого плагина — я обнаружил, что один энтузиаст сделал Fork и пофиксил львиную долю известных проблем библиотеки и назвал новую версию Vue Input Facade [npm] [Github]. Именно ее я и решил поставить в один из своих проектов и хочу написать небольшой гайдик о том, как это можно сделать.

Установка Vue Input Facade в Nuxt.js

Для начала конечно нужно установить библиотеку:

npm i vue-input-facade

Затем, в директории plugins я создал файл vue-input-facade.js и импортирую в нем саму библиотеку:

import Vue from 'vue';
import InputFacade from 'vue-input-facade';

Vue.use(InputFacade);

Далее в файле nuxt.config.js я подключаю созданный выше плагин:

plugins: [
  '@plugins/vue-input-facade.js',
],

Токены маски

• S — буквенные символы.
• # — числовые символы.
• X — буквенно-цифровые символы.
• A — буквенные символы, преобразованные в верхний регистр.
• a — буквенные символы, преобразованные в нижний регистр.
• \ — экранировать любой из вышеперечисленных символов.

Все настройки плагина можно найти в официальной документации.

Создание маски

Теперь можно создать маску. В компоненте с тегом input я пишу следующую разметку:

<input
  id="phone"
  v-facade="'+7 (###) ###-##-##'"
  type="text"
  name="phone"
  placeholder="+7 (___) ___−__−__"
>

В директиве v-facade я задаю маску и указываю, что вместо # я ожидаю получить только цифры. Все остальные атрибуты здесь опциональны. После всех этих манипуляций — маска должна быть рабочей. Отправляя форму — я получаю обработанный маской телефон:

Доступ к необработанному значению

Если вдруг на выходе вам нужно значение без обработки маской, то можете воспользоваться параметром masked. Однако же, если вы используете данный плагин через директиву v-facade (как я в примере выше), то вы можете получить необработанное значение через событие @input:

event.target: {
  value: '',
  unmaskedValue: ''
}

Собственно вот так довольно просто и быстро, можно создать почти любую логику для маски.

У этого плагина куда больше возможностей, чем я описал в данной статье. Рекомендую внимательно почитать официальную документацию. Например вы можете переопределить токены на свой вкус.