uni-app選擇國家區號組件 hy-countryPicker

我們在做登錄注冊功能的時候，可能會遇到選擇區號來使用不同國家手機號來登錄或者注冊的功能。這里我就介紹下我這個uni-app中使用的選擇區號的組件，包含不同國家國旗圖標。

效果圖

別的不說，先來一波效果圖。

• 登錄頁效果

• 選擇區號彈窗效果
  

使用教程

1. 首先通過插件市場集成到項目中，插件市場地址：iOS、Android、web區號選擇 - DCloud 插件市場
2. 在使用的地方直接使用，默認樣式是有 國旗 + 區號，如果不需要顯示區號可以通過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>

3. 處理選擇區號事件
   通過@selectChange="selectCountry"綁定選擇區號的事件，返回的是選中國家對應的對象數據。打印如下圖：
   

注意：

這里默認樣式是logo + code，可能不符合你的設計稿樣式。此時需要通過設置父視圖樣式來實現，想要修改組件最外層的樣式（比如background、border-radius等），可通過props中的customStyle屬性來進行設置。

插件市場地址

大家可以前往插件市場查看本插件的一些信息，也可以查看使用本人的其他插件，如覺有所幫助，可以動動發財的小手點個贊和收藏一下，非常感激！本插件地址如下:

iOS、Android、web區號選擇 - DCloud 插件市場