element-ui手机区号+手机号

需求场景

项目开发中对方要求手机号带上全球区号

需求分析

项目使用的是若依前端框架，element-ui的框架。尝试使用已经网上的组件vue-country-intl等发现不怎么适配element-ui的样式等。这还不是关键的，关键的是弹窗中使用这些组件发现区号的下拉展示框展示不全，层级存在问题，设置css的z-index等相关属性也不能有效处理。于是决定手搓一个element-ul下拉的区号，支持国际化，支持中英文搜索过滤，支持自定义label展示，样式自己还能修改。

效果展示

英文（国际化）

中文

代码实现

组件代码

涉及整个组件代码（国家区号json、国旗）已上传到这里：

element-ui风格下拉手机区号组件资源-CSDN文库