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

Оглавление

В данной статье категории плагинов для 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,1054 s
Время запросов: 0,1054 s
Количество запросов: 28
Источник: cache