发送手机号验证码是一个很常见的需求,项目中也遇到了好几次,但突然因为业务的拓展,导致以前和现有的这种发验证码的地方前面需要加上个地区码,需求也很简单。就用了element的 el-select 的下拉框。
最开始在网上整理的数据使用后的效果如下:
发现一个不太对的地方,就是点击下拉框中的内容,在输入框中完全显示,想要的效果是选中某个国家地区时,输入框中只显示该国家地区的地区号,而不是国家名称和区号一起显示。
原因是因为刚开始整理的数据的value是区号,但label是国家名称和区号,就导致了这种原因。
后来经过改正,将整理的数据也进行了修改,如下:(只展示了一部分)
{
text: 'China (中国) (+86)',
value: '86',
label: '+86'
},
{
text: 'Afghanistan (افغانستان) (+93)',
value: '93',
label: '+93'
},
{
text: 'Albania (Shqipëri) (+355)',
value: '355',
label: '+355'
},
{
text: 'Algeria (الجزائر) (+213)',
value: '213',
label: '+213'
},
{
text: 'American Samoa (+1684)',
value: '1684',
label: '+1684'
},
数据修改完了,使用上也进行了修改:
<el-option v-for="item in Areacode" :key="item.value" :label="item.label" :value="item.value">{{item.text}}</el-option>
即label也绑定上地区的区号,修改完后的效果如下: