@yasanchezz/vue-mask NPM

@yasanchezz/vue-mask

This is a input mask which is based on VueJs 2.6+ and requires modern browsers. Live Demo.

Installation

Install npm package npm install @yasanchezz/vue-mask --save

Declare dependency in main.js

import VueMask from '@yasanchezz/vue-mask';
import '@yasanchezz/vue-mask/dist/vue-mask.css';
Vue.use(VueMask);

Usage

<template>
  <vue-mask
    :value.sync="value"
    type="number"
    mask="+47 ### ## ###"
    mask-character="0"
    class="vue-mask"
    always-visible-mask
  ></vue-mask>
</template>

<style lang="scss" scoped>
.vue-mask {
  /* padding for input and mask */
  --mask-padding: 5px 10px;

  /* mask controlled character which was passed by mask-character prop */
  --mask-controlled-color: pink;

  /* mask uncontroller character does not look like a controllable */
  --mask-uncontrolled-color: gray;

  border: 2px solid black;
  border-radius: 4px;
  transition: border-color .1s ease-out;

  /* yeap, input has no styles itself, you have to style it */
  &:focus-within {
    border-color: blue;
  }
}
</style>

props

type String - can be a number right now
mask String - mask with # character, for example, +47 ### ## ###
mask-character String - one symbol which will replace controlled character # in the mask
value String - passed value
always-visible-mask Boolean - indicates to show mask all time. By default is false and mask will be shown when input is focused