ionic3利用ion-multi-picker实现国际区号选择

ionic 版本V.3.20

依赖安装

npm i ion-multi-picker --save

app.module.ts

import { MultiPickerModule } from 'ion-multi-picker';

@NgModule({declarations: [MyApp,//...],imports: [//....MultiPickerModule,       // <--加到这里IonicModule.forRoot(MyApp, {//.....}),]
})

XXX.html

<ion-item><ion-multi-picker item-content [(ngModel)]="number" [multiPickerColumns]="numberList" [cancelText]="'cancel'" [doneText]="'ok'"> </ion-multi-picker>
</ion-item>

XXX.ts

export class XXXPage {number: any = "86";numberList: any = [];numberListZh: any = [{"options": [{ value: "86", text: "中国(+86)" },{ value: "93", text: "阿富汗(+93)" },{ value: "355", text: "阿尔巴尼亚(+355)" },{ value: "213", text: "阿尔及尼亚(+213)" },{ value: "376", text: "安道尔(+376)" },{ value: "1264", text: "安圭拉岛(英)(+1264)" },{ value: "244", text: "安哥拉(+244)" },{ value: "1268", text: "安提瓜和巴布达(+1268)" },{ value: "54", text: "阿根廷(+54)" },{ value: "374", text: "亚美尼亚(+374)" },{ value: "247", text: "阿森松(英)(+247)" },{ value: "61", text: "澳大利亚(+61)" },{ value: "43", text: "奥地利(+43)" },{ value: "994", text: "阿塞拜疆(+994)" },{ value: "1242", text: "巴哈马国(+1242)" },{ value: "973", text: "巴林(+973)" },{ value: "880", text: "孟加拉国(+880)" },{ value: "1246", text: "巴巴多斯(+1246)" },{ value: "375", text: "白俄罗斯(+375)" },{ value: "32", text: "比利时(+32)" },{ value: "501", text: "伯利兹(+501)" },{ value: "229", text: "贝宁(+229)" },{ value: "1441", text: "百慕大群岛(英)(+1441)" },{ value: "591", text: "玻利维亚(+591)" },{ value: "267", text: "博茨瓦纳(+267)" },{ value: "55", text: "巴西(+55)" },{ value: "673", text: "文莱(+673)" },{ value: "359", text: "保加利亚(+359)" },{ value: "226", text: "布基纳法索(+226)" },{ value: "95", text: "缅甸(+95)" },{ value: "257", text: "布隆迪(+257)" },{ value: "237", text: "喀麦隆(+237)" },{ value: "1", text: "美国/加拿大(+1)" },{ value: "1345", text: "开曼群岛(英)(+1345)" },{ value: "236", text: "中非(+236)" },{ value: "235", text: "乍得(+235)" },{ value: "56", text: "智利(+56)" },{ value: "57", text: "哥伦比亚(+57)" },{ value: "242", text: "刚果(+242)" },{ value: "682", text: "科克群岛(新)(+682)" },{ value: "506", text: "哥斯达黎加(+506)" },{ value: "53", text: "古巴(+53)" },{ value: "357", text: "塞浦路斯(+357)" },{ value: "420", text: "捷克共和国(+420)" },{ value: "45", text: "丹麦(+45)" },{ value: "253", text: "吉布提(+253)" },{ value: "1890", text: "多米尼加共和国(+1890)" },{ value: "593", text: "厄瓜多尔(+593)" },{ value: "20", text: "埃及(+20)" },{ value: "503", text: "萨尔瓦多(+503)" },{ value: "372", text: "爱沙尼亚(+372)" },{ value: "251", text: "埃塞俄比亚(+251)" },{ value: "679", text: "斐济(+679)" },{ value: "358", text: "芬兰(+358)" },{ value: "33", text: "法国(+33)" },{ value: "594", text: "法属圭亚那(+594)" },{ value: "241", text: "加蓬(+241)" },{ value: "220", text: "冈比亚(+220)" },{ value: "995", text: "格鲁吉亚(+995)" },{ value: "49", text: "德国(+49)" },{ value: "233", text: "加纳(+233)" },{ value: "350", text: "直布罗陀(英)(+350)" },{ value: "30", text: "希腊(+30)" },{ value: "1809", text: "格林纳达(+1809)" },{ value: "1671", text: "关岛 (+1671)" },{ value: "502", text: "危地马拉(+502)" },{ value: "224", text: "几内亚 (+224)" },{ value: "592", text: "圭亚那 (+592)" },{ value: "509", text: "海地(+509)" },{ value: "504", text: "洪都拉斯(+504)" },{ value: "852", text: "香港(+852)" },{ value: "36", text: "匈牙利(+36)" },{ value: "354", text: "冰岛(+354)" },{ value: "91", text: "印度(+91)" },{ value: "62", text: "印度尼西亚(+62)" },{ value: "98", text: "伊朗(+98)" },{ value: "964", text: "伊拉克(+964)" },{ value: "353", text: "爱尔兰(+353)" },{ value: "972", text: "以色列(+972)" },{ value: "39", text: "意大利(+39)" },{ value: "225", text: "科特迪瓦(+225)" },{ value: "1876", text: "牙买加(+1876)" },{ value: "81", text: "日本(+81)" },{ value: "962", text: "约旦(+962)" },{ value: "855", text: "柬埔寨(+855)" },{ value: "327", text: "哈萨克斯坦 (+327)" },{ value: "254", text: "肯尼亚(+254)" },{ value: "82", text: "韩国(+82)" },{ value: "965", text: "科威特(+965)" },{ value: "331", text: "吉尔吉斯斯坦(+331)" },{ value: "856", text: "老挝(+856)" },{ value: "371", text: "拉脱维亚(+371)" },{ value: "266", text: "黎巴嫩(+266)" },{ value: "231", text: "利比里亚(+231)" },{ value: "218", text: "利比亚(+218)" },{ value: "423", text: "列支敦士登(+423)" },{ value: "370", text: "立陶宛(+370)" },{ value: "352", text: "卢森堡(+352)" },{ value: "853", text: "澳门(+853)" },{ value: "261", text: "马达加斯加(+261)" },{ value: "265", text: "马拉维(+265)" },{ value: "60", text: "马来西亚(+60)" },{ value: "960", text: "马尔代夫(+960)" },{ value: "223", text: "马里(+223)" },{ value: "356", text: "马耳他(+356)" },{ value: "1670", text: "马里亚纳群岛(+1670)" },{ value: "230", text: "毛里求斯(+230)" },{ value: "52", text: "墨西哥(+52)" },{ value: "373", text: "摩尔多瓦共和国(+373)" },{ value: "377", text: "摩纳哥(+377)" },{ value: "976", text: "蒙古(+976)" },{ value: "1664", text: "蒙特塞拉特(+1664)" },{ value: "212", text: "摩洛哥(+212)" },{ value: "258", text: "莫桑比克(+258)" },{ value: "264", text: "纳米尼亚(+264)" },{ value: "674", text: "瑙鲁(+674)" },{ value: "977", text: "尼泊尔(+977)" },{ value: "599", text: "荷属安的列斯(+599)" },{ value: "31", text: "荷兰(+31)" },{ value: "64", text: "新西兰(+64)" },{ value: "505", text: "尼加拉瓜(+505)" },{ value: "227", text: "尼日尔(+227)" },{ value: "234", text: "尼日利亚(+234)" },{ value: "850", text: "朝鲜(+850)" },{ value: "47", text: "挪威(+47)" },{ value: "968", text: "阿曼(+968)" },{ value: "92", text: "巴基斯坦(+92)" },{ value: "507", text: "巴拿马(+507)" },{ value: "675", text: "巴布亚新几内亚(+675)" },{ value: "595", text: "巴拉圭(+595)" },{ value: "51", text: "秘鲁(+51)" },{ value: "63", text: "菲律宾(+63)" },{ value: "48", text: "波兰(+48)" },{ value: "689", text: "法属波利尼西亚(+689)" },{ value: "351", text: "葡萄牙(+351)" },{ value: "1787", text: "波多黎各(+1787)" },{ value: "974", text: "卡塔尔(+974)" },{ value: "262", text: "留尼汪(+262)" },{ value: "40", text: "罗马尼亚(+40)" },{ value: "7", text: "俄罗斯(+7)" },{ value: "1758", text: "圣卢西亚(+1758)" },{ value: "1784", text: "圣文森特(+1784)" },{ value: "684", text: "东萨摩亚(+684)" },{ value: "685", text: "西萨摩亚(+685)" },{ value: "378", text: "圣马力诺 (+378)" },{ value: "239", text: "圣多美和普林西比(+239)" },{ value: "966", text: "沙特阿拉伯(+966)" },{ value: "221", text: "塞内加尔(+221)" },{ value: "248", text: "塞舌尔(+248)" },{ value: "232", text: "塞拉利(+232)" },{ value: "65", text: "新加坡(+65)" },{ value: "421", text: "斯洛伐克(+421)" },{ value: "386", text: "斯洛文尼亚(+386)" },{ value: "677", text: "所罗门群岛(+677)" },{ value: "252", text: "索马里(+252)" },{ value: "27", text: "南非(+27)" },{ value: "34", text: "西班牙(+34)" },{ value: "94", text: "斯里兰卡(+94)" },{ value: "1758", text: "圣卢西亚(+1758)" },{ value: "1784", text: "圣文森特和格林纳丁斯(+1784)" },{ value: "249", text: "苏丹(+249)" },{ value: "597", text: "苏里南(+597)" },{ value: "268", text: "斯威士兰(+268)" },{ value: "46", text: "瑞典(+46)" },{ value: "41", text: "瑞士(+41)" },{ value: "963", text: "叙利亚(+963)" },{ value: "886", text: "台湾(+886)" },{ value: "992", text: "塔吉克斯坦(+992)" },{ value: "255", text: "坦桑尼亚(+255)" },{ value: "66", text: "泰国(+66)" },{ value: "228", text: "多哥(+228)" },{ value: "676", text: "汤加(+676)" },{ value: "1868", text: "特立尼达和多巴哥(+1868)" },{ value: "216", text: "突尼斯(+216)" },{ value: "90", text: "土耳其 (+90)" },{ value: "993", text: "土库曼斯坦(+993)" },{ value: "256", text: "乌干达(+256)" },{ value: "380", text: "乌克兰(+380)" },{ value: "971", text: "阿拉伯联合酋长国(+971)" },{ value: "44", text: "英国(+44)" },{ value: "598", text: "乌拉圭(+598)" },{ value: "233", text: "乌兹别克斯坦(+233)" },{ value: "58", text: "委内瑞拉(+58)" },{ value: "84", text: "越南(+84)" },{ value: "967", text: "也门(+967)" },{ value: "381", text: "南斯拉夫(+381)" },{ value: "263", text: "津巴布韦(+263)" },{ value: "243", text: "刚果(+243)" },{ value: "260", text: "赞比亚(+260)" }]}];numberListEn: any = [{"options": [{ value: "86", text: "China (+86)" },{ value: "93", text: "Afghanistan (+93)" },{ value: "355", text: "Albania (+355)" },{ value: "213", text: "Algeria (+213)" },{ value: "376", text: "Andorra (+376)" },{ value: "1264", text: "Anguilla (+1264)" },{ value: "244", text: "Angola (+244)" },{ value: "1268", text: "Antigua and Barbuda (+1268)" },{ value: "54", text: "Argentina (+54)" },{ value: "374", text: "Armenia (+374)" },{ value: "247", text: "Ascension (+247)" },{ value: "61", text: "Australia (+61)" },{ value: "43", text: "Austria (+43)" },{ value: "994", text: "Azerbaijan (+994)" },{ value: "1242", text: "Bahamas (+1242)" },{ value: "973", text: "Bahrain (+973)" },{ value: "880", text: "Bangladesh (+880)" },{ value: "1246", text: "Barbados (+1246)" },{ value: "375", text: "Belarus (+375)" },{ value: "32", text: "Belgium (+32)" },{ value: "501", text: "Belize (+501)" },{ value: "229", text: "Benin (+229)" },{ value: "1441", text: "Bermuda Is. (+1441)" },{ value: "591", text: "Bolivia (+591)" },{ value: "267", text: "Botswana (+267)" },{ value: "55", text: "Brazil (+55)" },{ value: "673", text: "Brunei (+673)" },{ value: "359", text: "Bulgaria (+359)" },{ value: "226", text: "Burkina-faso (+226)" },{ value: "95", text: "Burma (+95)" },{ value: "257", text: "Burundi (+257)" },{ value: "237", text: "Cameroon (+237)" },{ value: "1", text: "America/Canada (+1)" },{ value: "1345", text: "Cayman Is. (+1345)" },{ value: "236", text: "Central African Republic (+236)" },{ value: "235", text: "Chad (+235)" },{ value: "56", text: "Chile (+56)" },{ value: "57", text: "Colombia (+57)" },{ value: "242", text: "Congo (+242)" },{ value: "682", text: "Cook Is. (+682)" },{ value: "506", text: "Costa Rica (+506)" },{ value: "53", text: "Cuba (+53)" },{ value: "357", text: "Cyprus (+357)" },{ value: "420", text: "Czech Republic (+420)" },{ value: "45", text: "Denmark (+45)" },{ value: "253", text: "Djibouti (+253)" },{ value: "1890", text: "Dominica Rep. (+1890)" },{ value: "593", text: "Ecuador (+593)" },{ value: "20", text: "Egypt (+20)" },{ value: "503", text: "EI Salvador (+503)" },{ value: "372", text: "Estonia (+372)" },{ value: "251", text: "Ethiopia (+251)" },{ value: "679", text: "Fiji (+679)" },{ value: "358", text: "Finland (+358)" },{ value: "33", text: "France (+33)" },{ value: "594", text: "French Guiana (+594)" },{ value: "241", text: "Gabon (+241)" },{ value: "220", text: "Gambia (+220)" },{ value: "995", text: "Georgia (+995)" },{ value: "49", text: "Germany (+49)" },{ value: "233", text: "Ghana (+233)" },{ value: "350", text: "Gibraltar (+350)" },{ value: "30", text: "Greece (+30)" },{ value: "1809", text: "Grenada (+1809)" },{ value: "1671", text: "Guam (+1671)" },{ value: "502", text: "Guatemala (+502)" },{ value: "224", text: "Guinea (+224)" },{ value: "592", text: "Guyana (+592)" },{ value: "509", text: "Haiti (+509)" },{ value: "504", text: "Honduras (+504)" },{ value: "852", text: "Hong Kong (+852)" },{ value: "36", text: "Hungary (+36)" },{ value: "354", text: "Iceland (+354)" },{ value: "91", text: "India (+91)" },{ value: "62", text: "Indonesia (+62)" },{ value: "98", text: "Iran (+98)" },{ value: "964", text: "Iraq (+964)" },{ value: "353", text: "Ireland (+353)" },{ value: "972", text: "Israel (+972)" },{ value: "39", text: "Italy (+39)" },{ value: "225", text: "Ivory Coast (+225)" },{ value: "1876", text: "Jamaica (+1876)" },{ value: "81", text: "Japan (+81)" },{ value: "962", text: "Jordan (+962)" },{ value: "855", text: "Kampuchea (Cambodia) (+855)" },{ value: "327", text: "Kazakstan (+327)" },{ value: "254", text: "Kenya (+254)" },{ value: "82", text: "Korea (+82)" },{ value: "965", text: "Kuwait (+965)" },{ value: "331", text: "Kyrgyzstan (+331)" },{ value: "856", text: "Laos (+856)" },{ value: "371", text: "Latvia (+371)" },{ value: "266", text: "Lesotho (+266)" },{ value: "231", text: "Liberia (+231)" },{ value: "218", text: "Libya (+218)" },{ value: "423", text: "Liechtenstein (+423)" },{ value: "370", text: "Lithuania (+370)" },{ value: "352", text: "Luxembourg (+352)" },{ value: "853", text: "Macao (+853)" },{ value: "261", text: "Madagascar (+261)" },{ value: "265", text: "Malawi (+265)" },{ value: "60", text: "Malaysia (+60)" },{ value: "960", text: "Maldives (+960)" },{ value: "223", text: "Mali (+223)" },{ value: "356", text: "Malta (+356)" },{ value: "1670", text: "Mariana Is. (+1670)" },{ value: "230", text: "Mauritius (+230)" },{ value: "52", text: "Mexico (+52)" },{ value: "373", text: "Republic of Moldova (+373)" },{ value: "377", text: "Monaco (+377)" },{ value: "976", text: "Mongolia (+976)" },{ value: "1664", text: "Montserrat Is (+1664)" },{ value: "212", text: "Morocco (+212)" },{ value: "258", text: "Mozambique (+258)" },{ value: "264", text: "Namibia (+264)" },{ value: "674", text: "Nauru (+674)" },{ value: "977", text: "Nepal (+977)" },{ value: "599", text: "Netheriands Antilles (+599)" },{ value: "31", text: "Netherlands (+31)" },{ value: "64", text: "New Zealand (+64)" },{ value: "505", text: "Nicaragua (+505)" },{ value: "227", text: "Niger (+227)" },{ value: "234", text: "Nigeria (+234)" },{ value: "850", text: "North Korea (+850)" },{ value: "47", text: "Norway (+47)" },{ value: "968", text: "Oman (+968)" },{ value: "92", text: "Pakistan (+92)" },{ value: "507", text: "Panama (+507)" },{ value: "675", text: "Papua New Cuinea (+675)" },{ value: "595", text: "Paraguay (+595)" },{ value: "51", text: "Peru (+51)" },{ value: "63", text: "Philippines (+63)" },{ value: "48", text: "Poland (+48)" },{ value: "689", text: "French Polynesia (+689)" },{ value: "351", text: "Portugal (+351)" },{ value: "1787", text: "Puerto Rico (+1787)" },{ value: "974", text: "Qatar (+974)" },{ value: "262", text: "Reunion (+262)" },{ value: "40", text: "Romania (+40)" },{ value: "7", text: "Russia (+7)" },{ value: "1758", text: "Saint Lueia (+1758)" },{ value: "1784", text: "Saint Vincent (+1784)" },{ value: "684", text: "Samoa Eastern (+684)" },{ value: "685", text: "Samoa Western (+685)" },{ value: "378", text: "San Marino (+378)" },{ value: "239", text: "Sao Tome and Principe (+239)" },{ value: "966", text: "Saudi Arabia (+966)" },{ value: "221", text: "Senegal (+221)" },{ value: "248", text: "Seychelles (+248)" },{ value: "232", text: "Sierra Leone (+232)" },{ value: "65", text: "Singapore (+65)" },{ value: "421", text: "Slovakia (+421)" },{ value: "386", text: "Slovenia (+386)" },{ value: "677", text: "Solomon Is (+677)" },{ value: "252", text: "Somali (+252)" },{ value: "27", text: "South Africa (+27)" },{ value: "34", text: "Spain (+34)" },{ value: "94", text: "Sri Lanka (+94)" },{ value: "1758", text: "St.Lucia (+1758)" },{ value: "1784", text: "St.Vincent (+1784)" },{ value: "249", text: "Sudan (+249)" },{ value: "597", text: "Suriname (+597)" },{ value: "268", text: "Swaziland (+268)" },{ value: "46", text: "Sweden (+46)" },{ value: "41", text: "Switzerland (+41)" },{ value: "963", text: "Syria (+963)" },{ value: "886", text: "Taiwan (+886)" },{ value: "992", text: "Tajikstan (+992)" },{ value: "255", text: "Tanzania (+255)" },{ value: "66", text: "Thailand (+66)" },{ value: "228", text: "Togo (+228)" },{ value: "676", text: "Tonga (+676)" },{ value: "1868", text: "Trinidad and Tobago (+1868)" },{ value: "216", text: "Tunisia (+216)" },{ value: "90", text: "Turkey (+90)" },{ value: "993", text: "Turkmenistan (+993)" },{ value: "256", text: "Uganda (+256)" },{ value: "380", text: "Ukraine (+380)" },{ value: "971", text: "United Arab Emirates (+971)" },{ value: "44", text: "United Kingdom (+44)" },{ value: "598", text: "Uruguay (+598)" },{ value: "233", text: "Uzbekistan (+233)" },{ value: "58", text: "Venezuela (+58)" },{ value: "84", text: "Vietnam (+84)" },{ value: "967", text: "Yemen (+967)" },{ value: "381", text: "Yugoslavia (+381)" },{ value: "263", text: "Zimbabwe (+263)" },{ value: "243", text: "Zaire (+243)" },{ value: "260", text: "Zambia (+260)" }]}];constructor(private app: App,public navCtrl: NavController,public navParams: NavParams,) {this.numberList = this.numberListZh;//中文项目引用// this.numberList = this.numberListEn;//英文项目引用}

坑！！！
如果页面为子页面会报错
Can’t bind to ‘multiPickerColumns’ since it isn’t a known property of ‘ion-multi-picker’.

解决办法
在XXX.module.ts里面在导入一次

import { MultiPickerModule } from 'ion-multi-picker';
@NgModule({declarations: [//...],exports: [//....],imports: [//...MultiPickerModule,      // <--加到这里//...,],
})
export class XXXPageModule { }

ionic3利用ion-multi-picker实现国际区号选择相关推荐

vue+vant 移动端国际区号组件封装
1.组件 <template><div><van-nav-bar title="Select Country/Region" left-arrow @ ...
国际电话区号--各国或地区电话国际区号对照表
具体参考:国际电话区号--各国或地区电话国际区号对照表
jQuery国际电话区号选择插件intlTelInput.js
jQuery国际电话区号选择插件intlTelInput.js URL: http://www.jq22.com/jquery-info12917 jQuery世界地区三级联动 URL: http ...
Vue国际区号组件开发（目前已经发布到npm）
安装命令 npm install vue-country-code-selector 中国的国际区号是86,所以组件默认值是86,当然也可以根据需求,填写相应国家的国际区号. 1.组件支持国家的中文名 ...
UTM坐标系区号选择
UTM坐标系区号选择转载自知乎:https://zhuanlan.zhihu.com/p/255036625 (写的很好,为了防止博主删除,特地在此转载一份) UTM(Universal Trans ...
手机号国际区号JSON格式另附PHP获取
{"list": [{"city": "中国大陆","code": "+86"},{"ci ...
国际区号和电话号码剥离
1.引入pom依赖 <!-- https://mvnrepository.com/artifact/com.googlecode.libphonenumber/libphonenumber -- ...
崩坏3区号＋86_手机号码前的“+86”是什么意思？
原标题:手机号码前的"+86"是什么意思? 不知道大家发现过这样一个现象没有,有时候收到的短信的手机号码前有会"+86"字样.这究竟是什么意思呢?直接拨打过去会 ...
空间换时间--编程小绝招解决电话区号识别算法问题
空间换时间问题通常都是一个不大的问题里的一个不小的解决方案.首先要理解代码中函数的一个大致的代价,在输入比较固定,计算输出又比较费劲的时候,常常就是空间换时间发挥作用的时候了.通过几个简单的例子您就会 ...
全球农业资源利用与粮食安全研讨会国际农民丰收节贸易会
全球农业资源利用与粮食安全研讨会国际农民丰收节贸易会新闻中国采编网中国新闻采编网谋定研究中国智库网经信研究国研智库国情讲坛哲商对话万权采编:为深化全球农业资源利用与粮食安全研究,服务 ...

ionic3利用ion-multi-picker实现国际区号选择

ionic 版本V.3.20

依赖安装

app.module.ts

XXX.html

XXX.ts

ionic3利用ion-multi-picker实现国际区号选择相关推荐

最新文章

热门文章