地址
https://github.com/CherryLeee/vue-country-code-selector
npm安装使用
安装
npm install vue-country-code-selector
使用
<template>
<div class="tel-container">
<country-code-selector :countryCode.sync="value"></country-code-selector>
<input type="text" v-model="value">
<p>这是国际区号{{value}}</p>
</div>
</template>
<script>
import countryCodeSelector from 'vue-country-code-selector'
export default {
name: 'VueTelInput',
components: {
countryCodeSelector
},
data () {
return {
// 这里是对应国家的国际区号,这里是必填项,例如中国是86
value: 86
}
}
}
</script>
<style scoped>
.tel-container{
display: flex;
align-items: center;
}
input {
height: 20px;
}
p {
margin-left: 20px;
}
</style>
如果需要自己定义样式或者修改数据建议直接下载源码拷贝到自己的项目中去。
我修改后的组件:https://download.csdn.net/download/qq_43548590/74739558
国家区号数据库:https://download.csdn.net/download/qq_43548590/74739160