Vue Input Facade
Легковесная и свободная от зависимостей библиотека для создания масок, созданная специально для Vue.

Оглавление
Иногда на сайтах требуется установить маску в 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: ''
}
Собственно вот так довольно просто и быстро, можно создать почти любую логику для маски.
У этого плагина куда больше возможностей, чем я описал в данной статье. Рекомендую внимательно почитать официальную документацию. Например вы можете переопределить токены на свой вкус.
Время запросов: 0,1081 s
Количество запросов: 28
Источник: cache