uni-app 选择国家区号

Heyuan_Xie2025-07-17 5:09

uni-app选择国家区号组件 hy-countryPicker

我们在做登录注册功能的时候，可能会遇到选择区号来使用不同国家手机号来登录或者注册的功能。这里我就介绍下我这个uni-app中使用的选择区号的组件，包含不同国家国旗图标。

效果图

别的不说，先来一波效果图。

登录页效果

选择区号弹窗效果

使用教程

首先通过插件市场集成到项目中，插件市场地址：iOS、Android、web区号选择 - DCloud 插件市场
在使用的地方直接使用，默认样式是有国旗 + 区号，如果不需要显示区号可以通过props里的showCode来控制。如果需要自定义其他样式，比如我这里需要右边有一个下拉箭头，可通过设置当前组件背景色透明，在父视图去定义。实例代码：

html 复制代码

<view
  class="flex items-center justify-center bg-white rounded-xl px-3 h-96 border border-gray-200 relative">            
  <uv-icon
    class="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-picker
      v-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 插件市场