JSFiddle - React, Tailwind, and code Playground

by Zimeng Gao

HTML

<script src="//unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/int-tel-input.js"></script>

<div id="app">
  <div id="demo">
    <int-tel-input
      :phone="user.phone"
      :country-abbr="user.countryAbbr"
      v-on:country-change="countryCodeChange"
      @phone-change="phoneNumberChange"
    ></int-tel-input>
    <p><span v-text="`phone number: ${user.phone}`"></span></p>
    <p><span v-text="`country abbr: ${user.countryAbbr}`"></span></p>
    <p><span v-text="`country code: ${user.countryCode}`"></span></p>
  </div>
</div>

CSS

#demo {
    width: 400px;
    margin: auto;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
    
#demo > p {
  margin-top: 20px
}

JavaScript

new Vue({
  el: '#app',
  
  components: {
    IntTelInput: IntTelInput.default
  },
  
  data: {
    user: {
      phone: '',
      countryAbbr: 'af',
      countryCode: ''
    }
  },
  
  mounted () {
  },
  
  methods: {
    countryCodeChange (country) {
      console.log(country)
      this.user.countryAbbr = country.addr
      this.user.countryCode = country.code
    },
    phoneNumberChange (phone) {
      this.user.phone = phone
    }
  }
})