Vue国际区号组件开发(目前已经发布到npm)
当我们在使用一些支持多语言的app或者网站,使用手机注册的时候,在填写手机号的前面都会有+86的字样。所谓的+86就是我们这里所提及的国际区号。我所做的这个vue组件,效果如下目前这个组件没有实现每个国家前面都有相应的国旗。import vueIntlTelInput from "./vue-intl-tel-input";components: {vueIntlTelInput...
·
安装命令
npm install vue-country-code-selector
中国的国际区号是86,所以组件默认值是86,当然也可以根据需求,填写相应国家的国际区号。
1、组件支持国家的中文名字或者英文名字的模糊搜索;
2、点击下拉框中的某一项即可实现切换。(并且可以实现code值的子传父);
3、下拉框展示会自动定位(平滑滚动)到当前选中位置;
组件效果如下:
组件的使用方式如下
<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>
更多推荐
已为社区贡献15条内容
所有评论(0)