JSFiddle - React, Tailwind, and code Playground

by Theara Yuom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/3.x/js/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/js/inputmask.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/3.x/js/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<h3>
    Phone Number:
    </h3>
    <!-- <input type="text" v-model="phone" v-input-mask
      data-inputmask="'mask': '+7 (999) 999-9999'"
        />
        
        <h4>
        Entered: {{ phone }}
        </h4> -->
        
<el-input placeholder="Please input" v-model="input" v-inputmask
      :data-inputmask="maskOpt" @blur="change('hi')"></el-input>
      
      <el-button @click="getData">Get data</el-button>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

Vue.directive('inputmask', {
    bind: function(el, obj, vModel) {
      //Inputmask({}).mask(el);
      let input = el.getElementsByTagName('INPUT')[0]
      var mask = new Inputmask({
  				autoUnmask: true,
			});
			mask.mask(input);
    }
 })
  
var Main = {
  data() {
    return {
      input: '',
      phone: "",
      maskOpt:"'mask': '+7 (999) 999-9999'"
      //maskOpt:"'alias': 'currency'"
    }
  },
  methods:{
  	getData(){
    	console.log(this.input)
    },
    change(val){
    	console.log(val)
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')