v-mask

Оглавление

• Установка v-mask в Nuxt.js
• Placeholders
• Расширение стандартного функционала

В данной статье категории плагинов для Vue.js и Nuxt.js, я рассказывал про плагин для создания масок. У Vue Input Facade есть один недостаток, который возможно когда-нибудь исправят — данный плагин не работает в IE 11 версии. К сожалению, довольно часто клиентам которые еще ездят на динозаврах, крайне необходимо соблюдать поддержку осла. И мне пришлось решать эту проблему. В случае с Nuxt.js можно было бы попробовать воспользоваться опцией transpile. Но хотелось универсального решения и я его нашел в виде плагина v-mask [npm] [Github].

Данный плагин еще более легковесный чем Vue Input Facade и имеет хорошую поддержку. Ну и не менее важно, что он имеет неплохую поддержку от сообщества и сравнительно недавно была выпущена новая версия.

Установка v-mask в Nuxt.js

Сначала установим плагин:

npm install v-mask

Затем, в директории plugins я создал файл v-mask.js и импортирую плагин:

import Vue from 'vue';
import VueMask from 'v-mask';

Vue.use(VueMask);

Теперь в файле nuxt.config.js можно подключить созданный выше плагин:

plugins: [
  '@plugins/v-mask.js',
],

Теперь можно настроить маску в нужном нам поле:

<template>
  <input type="text" v-mask="'+7 (###) ###-##-##'" v-model="inputPhoneModel">
</template>
<script>
  export default {
    data() {
      return {
        inputPhoneModel: '',
      };
    },
  }
</script>

Теперь input поле будет содержать маску вида +7 (000) 000-00-00.

Placeholders

Настраивать маску вы можете самостоятельно при помощи следующих плейсхолдеров:

• # — число (0-9)
• A — буквенные символы, в любом регистре (a-z, A-Z).
• N — числа или буквы (a-z, A-Z, 0-9).
• X — любой символ.
• ? — опциональный символ.

Расширение стандартного функционала

В большинстве случаев, стандартного функционала плагина хватает. Но если вам нужно кастомные решения, которые не покрывает стандартный функционал, то вы можете создавать свои плейсхолдеры, создавать уникальные маски для конкретного случая при помощи регулярных выражений, а для более сложных масок — писать свои функции.

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