富贵资源网 Design By www.hznty.com
前言
本文主要给大家介绍的是关于利用Ionic2 + angular4实现一个地区选择组件的相关内容,为什么会有这篇文章?主要是因为最近在项目重构的过程中,发现之前用mobiscroll写的地区选择指令在angular2中很难重用(毕竟是用typeScript)。于是就萌生了自己写一个组件的想法。
想和之前一样基于mobiscroll去写,但是发现非常耗费精力,于是某日万般无奈这下搜了一下相关的组件,不出所料已经有人写了。https://www.npmjs.com/package...但是此组件并不符合我的要求。我不是单纯的选择省市区,还可能是选择省市或者省。于是参照此项目基于ionic2的picker写了一个公用组件。下面话不多说了,感兴趣的朋友们下面来一起看看详细的介绍:
具体代码如下:
AreasSelect.ts
import {PickerController} from "ionic-angular"; import {Component, EventEmitter, Output, Input} from "@angular/core"; import {areasList} from "../../datasource/areas"; @Component({ selector: 'areas-select', templateUrl: 'areasSelect.com.html', }) export class AreasSelect { constructor(protected Picker: PickerController) { } private picker; private provinceCol = 0; // 省列 private cityCol = 0; // 市列 private regionCol = 0; // 区列 private pickerColumnCmps; // picker纵列数据实例 private isOpen = false; // 是否被创建 private pickerCmp; // picker 实例 private value = ''; // 选中后的数据 @Input() citiesData = areasList; // 地区数据(默认为areas.ts的数据) @Input() cancelText = '关闭'; // 关闭按钮文本 @Input() doneText = '完成'; // 完成按钮文本 @Input() separator = ''; // 数据衔接模式 @Input() level = 3; // 等级设置 最高为三级 /** * 关闭时触发的事件 * 没有值返回 * @type {EventEmitter} */ @Output() cancel: EventEmitter<any> = new EventEmitter(); // 关闭事件 /** * 完成时触发的事件 * 返回值为obj * obj = {data: object,value: string} data为对应的省市区和编码 * @type {EventEmitter} */ @Output() done: EventEmitter<any> = new EventEmitter(); // 完成事件 /** * 打开地区选择器 * 基本思路 * 1.创建picker * 2. 先把数据处理成省市区分开的数组 * 3. 将数据以列的形式给到picker * 4. 设置数据显示样式(picker) * 5. 生成picker */ private open() { let pickerOptions = { buttons: [ { text: this.cancelText, role: 'cancel', handler:() => { this.cancel.emit(null); } }, { text: this.doneText, handler: (data) =>{ this.onChange(data); this.done.emit({ data: data, value: this.value }); } } ] }; this.picker = this.Picker.create(pickerOptions); this.generate();// 加载 this.validate(this.picker); // 渲染 this.picker.ionChange.subscribe(() => { this.validate(this.picker); }); // 生成 this.picker.present(pickerOptions).then(() => { this.pickerCmp = this.picker.instance; this.pickerColumnCmps = this.pickerCmp._cols.toArray(); this.pickerColumnCmps.forEach(function (col) { return col.lastIndex = -1; }); }); this.isOpen = true; this.picker.onDidDismiss(function () { this.isOpen = false; }); } /** 对数据进行处理,并移交给picker * */ private generate() { let values = this.value.toString().split(this.separator); // Add province data to picker let provinceCol = { name: 'province', options: this.citiesData.map(function (province) { return {text: province.name, value: province.code, disabled: false}; }), selectedIndex: 0 }; let provinceIndex = this.citiesData.findIndex(function (option) { return option.name == values[0]; }); provinceIndex = provinceIndex === -1 "px"; } else if (columns.length === 3) { let width = Math.max(columns[0], columns[2]); pickerColumns[0].align = 'right'; pickerColumns[1].columnWidth = columns[1] * 33 + "px"; pickerColumns[0].optionsWidth = pickerColumns[2].optionsWidth = width * 17 + "px"; pickerColumns[2].align = 'left'; } } /** * 验证数据 * @param picker */ private validate(picker) { let _this = this; let columns = picker.getColumns(); let provinceCol = columns[0]; let cityCol = columns[1]; let regionCol = columns[2]; if (cityCol && this.provinceCol != provinceCol.selectedIndex) { cityCol.selectedIndex = 0; let cityColData = this.citiesData[provinceCol.selectedIndex].children; cityCol.options = cityColData.map(function (city) { return {text: city.name, value: city.code, disabled: false}; }); if (this.pickerColumnCmps && cityCol.options.length > 0) { setTimeout(function () { return _this.pickerColumnCmps[1].setSelected(0, 100); }, 0); } } if (regionCol && (this.cityCol != cityCol.selectedIndex || this.provinceCol != provinceCol.selectedIndex)) { let regionData = this.citiesData[provinceCol.selectedIndex].children[cityCol.selectedIndex].children; regionCol.selectedIndex = 0; regionCol.options = regionData.map(function (city) { return {text: city.name, value: city.code, disabled: false}; }); if (this.pickerColumnCmps && regionCol.options.length > 0) { setTimeout(function () { return _this.pickerColumnCmps[2].setSelected(0, 100); }, 0); } } this.provinceCol = provinceCol.selectedIndex; this.cityCol = cityCol "" + newData['province'].text + this.separator + (newData['city'].text || '') + this.separator + (newData['region'].text || ''); } return "" + newData['province'].text + this.separator + (newData['city'].text || ''); } return "" + newData['province'].text; } }
areasSelect.com.html
其实是不需要对应的template的,但是为了能和父级传参,这里创建了一个空的template
<div></div>
具体用法:
在需要用到的页面调用
test.page.html
<ion-content> <button ion-button block icon-left color="light" (tap)="showAreasSelect()">地区选择</button> </ion-content> <areas-select #areasSelect [level]="3" (cancel)="closeSelect()" (done)="done($event)"></areas-select>
test.page.ts
import {Component, ElementRef, Injector, ViewChild} from "@angular/core"; import {BasePage} from "../base.page"; @Component({ templateUrl: 'test.page.html', styles: [] }) export class TestPage extends BasePage { constructor(protected rt: ElementRef, protected ij: Injector) { super(rt, ij); } @ViewChild('areasSelect') areasSelect; showAreasSelect() { this.areasSelect.open(); } done(data) { this.showAlert(JSON.stringify(data)); } closeSelect() { this.showAlert('you click close'); } }
没有地区数据json或ts的文件可以去这里获取:http://xiazai.jb51.net/201707/yuanma/regional_data(jb51.net).rar
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...