Skip to content

Instantly share code, notes, and snippets.

@jebai0521

jebai0521/demo1.html

Created October 15, 2019 12:59
Show Gist options
  • Save jebai0521/c35232f1958bfe15f97c8d76dfa1b86e to your computer and use it in GitHub Desktop.
Save jebai0521/c35232f1958bfe15f97c8d76dfa1b86e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
demo1.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-tel-input"></script>
<!-- <script src="https://unpkg.com/vue-phone-number-input" charset="utf-8"></script> -->
<script type="text/javascript">
</script>
</head>
<bod>
<div id="number">
<vue-tel-input
placeholder="12345"
v-on:input="input"
v-on:validate="validate"
v-on:blur="blur"
v-on:space="space"
v-on:enter="enter"
v-on:open="open"
v-on:close="close"
v-on:country-changed="countryChanged"
v-bind:preferredCountries="preferredCountries"
v-model="phone"></vue-tel-input>
</div>
</bod>
<script type="text/javascript">
Vue.component('vue-tel-input', VueTelInput.VueTelInput);
var app1 = new Vue({
el: '#number',
data: {
phone: '',
preferredCountries : ["CN", "SG", "HK", "TW"]
},
methods: {
input: function (event) {
console.log('input', this.phone, event);
},
validate: function (event) {
console.log('validate', event);
},
blur: function () {
console.log('blur');
},
space: function () {
console.log('space');
},
enter: function () {
console.log('enter');
},
open: function () {
console.log('open');
},
close: function () {
console.log('close');
},
countryChanged: function (event) {
console.log('countryChanged', event);
}
}
});
</script>
</html>
Raw
demo2.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="https://unpkg.com/[email protected]/dist/vue-phone-number-input.umd.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/vue-phone-number-input.css"> -->
<script src="./vue-phone-number-input.umd.js"></script>
<link rel="stylesheet" type="text/css" href="./vue-phone-number-input.css">
<script type="text/javascript">
</script>
</head>
<bod>
<div id="number">
<vue-phone-number-input v-model="phone"
v-on:phone-number-focused="focused"
v-on:phone-number-blur="blur"
v-on:input="input"
v-on:update="update"
color="#FF0000"
v-bind:preferred-countries="preferredCountries"
/>
</div>
</bod>
<script type="text/javascript">
Vue.component('vue-phone-number-input', VuePhoneNumberInput);
var app = new Vue({
el: '#number',
data: {
phone: '',
preferredCountries : ["CN", "SG", "HK", "TW"]
},
methods: {
focused: function () {
console.log('focused');
},
blur: function () {
console.log('blur');
},
input: function () {
console.log('input', this.phone);
},
update: function () {
console.log('update', this.phone);
}
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment