V-mask plugin playground

by Max Liashuk

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<div id="app">
  <label>
    <input type="text" v-mask="mask" v-model="inputVal">
  </label>
</div>

JavaScript

// Use as plugin
Vue.use(VueMask.VueMaskPlugin);

new Vue({
  el: '#app',
  data: {
    mask: (value) => {
      value = value.replace(/[^0\.9]/g, '');
      let beforeDot = []
      let beforeDotLength = value.indexOf('.') > 0 ? value.split('.')[0].length : value.length;
      if (beforeDotLength <= 2) {
        beforeDot = [/\d/, /\d/]
      } else if (beforeDotLength == 3) {
        beforeDot = [/\d/, /\d/, /\d/]
      } else {
        beforeDot = [/\d/, /\d/, /\d/, /\d/]
      }

      let afterDot = []
      let afterDotLength = value.indexOf('.') > 0 ? value.split('.')[0].length : 2;
      if (afterDotLength <= 1) {
        afterDot = [/\d/]
      } else {
        afterDot = [/\d/, /\d/]
      }
      return [...beforeDot, '.', ...afterDot];
    },
    inputVal: '',
  }
})