Vue Directives + jQuery Mask Plugin

by WILLIAM CORREA

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://igorescobar.github.io/jQuery-Mask-Plugin/css/main.css">
<div id="app">
  <div class="container">
    <h1>Vue Directives + jQuery Mask Plugin</h1>
    <h3>A plugin to make masks on form fields</h3>
  </div>

  <input
    type="text"
    v-time
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="'00/00/0000'"
    placeholder="00/00/0000"
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="'00:00:00'"
    placeholder="00:00:00"
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="'00/00/0000 00:00:00'"
    placeholder="00/00/0000 00:00:00"
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="'00000-000'"
    placeholder="00000-000"
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="'0000-0000'"
    placeholder="0000-0000"
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="'(00) 0000-0000'"
    placeholder="(00) 0000-0000"
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="'(000) 000-0000'"
    placeholder="(000) 000-0000"
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="'AAA 000-S0S'"
    placeholder="AAA 000-S0S"
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="{ mask: '000.000.000-00', reverse: true}"
    placeholder="000.000.000-00"
    :value="value"
    @input="value = $event.target.value"
  >
  <input
    v-mask="{ mask: '00.000.000/0000-00', reverse: true}"
    placeholder="00.000.000/0000-00"
    :value="value"
    @input="value = $event.target.value"
  >
 ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

input {
  display: block;
  margin: 0 0 10px 0;
}

Vue

// https://vuejs.org/v2/guide/custom-directive.html
new Vue({
  el: "#app",
  data: {
   value: ''
  },
  directives: {
		time: {
      inserted: function (el) {
        $(el).mask('00:00')
      }
  	},
  	mask: {
      inserted: function (el, binding) {
      	if (typeof binding.value === 'object') {
        	$(el).mask(binding.value.mask, binding.value)
          return
    		}
        $(el).mask(binding.value)
   		}
  	}
	}
})