Дата публикации
12 Ноября 2020
Дата изменения
12 Ноября 2020
Уникальных просмотров
2.377

Оглавление

Иногда на сайтах требуется установить маску в 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',
],

Токены маски

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

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

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

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

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

Результат работы плагина Vue Input Facade

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

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

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

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

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

Благодарность автору

Если по какой-либо причине вы хотите поблагодарить автора данного ресурса, вы можете это сделать одним из удобных для вас способов ниже.

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1081 s
Время запросов: 0,1081 s
Количество запросов: 28
Источник: cache