张家港外贸网站设计外媒头条最新消息
uni-app选择国家区号组件 hy-countryPicker
我们在做登录注册功能的时候，可能会遇到选择区号来使用不同国家手机号来登录或者注册的功能。这里我就介绍下我这个uni-app中使用的选择区号的组件，包含不同国家国旗图标。
效果图
别的不说，先来一波效果图。
- 登录页效果
- 选择区号弹窗效果
使用教程
- 首先通过插件市场集成到项目中，插件市场地址：iOS、Android、web区号选择 - DCloud 插件市场
- 在使用的地方直接使用，默认样式是有 国旗 + 区号，如果不需要显示区号可以通过props里的showCode来控制。如果需要自定义其他样式，比如我这里需要右边有一个下拉箭头，可通过设置当前组件背景色透明，在父视图去定义。实例代码：
<viewclass="flex items-center justify-center bg-white rounded-xl px-3 h-96 border border-gray-200 relative"> <uv-iconclass="px-1 pl-6"name="arrow-down"size="12"color="var(--c-helper_title)"></uv-icon><view class="absolute left-0 top-0 right-0 bottom-0"><aure-country-pickerv-model="countryCode"defaultCountryCode="US":custom-style="{'height': '100%','padding': '0','padding-left': '30rpx','background': 'transparent'}":title="'Select Country'":cancelText="'Cancel'":searchPlaceholder="'Search Country or City'":duration="350":position="'bottom'":round="true":radius="'24rpx'":mask-closable="true"@change="selectCountry"></aure-country-picker></view>
</view>
- 处理选择区号事件
通过@selectChange="selectCountry"绑定选择区号的事件，返回的是选中国家对应的对象数据。打印如下图：
注意：
这里默认样式是logo + code，可能不符合你的设计稿样式。此时需要通过设置父视图样式来实现，想要修改组件最外层的样式（比如background、border-radius等），可通过props中的customStyle属性来进行设置。
插件市场地址
大家可以前往插件市场查看本插件的一些信息，也可以查看使用本人的其他插件，如觉有所帮助，可以动动发财的小手点个赞和收藏一下，非常感激！本插件地址如下:
iOS、Android、web区号选择 - DCloud 插件市场