利用Ionic2 + angular4实现一个地区选择组件
程序员文章站
2022-09-02 15:50:08
前言
本文主要给大家介绍的是关于利用ionic2 + angular4实现一个地区选择组件的相关内容,为什么会有这篇文章?主要是因为最近在项目重构的过程中,发现之前用mo...
前言
本文主要给大家介绍的是关于利用ionic2 + angular4实现一个地区选择组件的相关内容,为什么会有这篇文章?主要是因为最近在项目重构的过程中,发现之前用mobiscroll写的地区选择指令在angular2中很难重用(毕竟是用typescript)。于是就萌生了自己写一个组件的想法。
想和之前一样基于mobiscroll去写,但是发现非常耗费精力,于是某日万般无奈这下搜了一下相关的组件,不出所料已经有人写了。...但是此组件并不符合我的要求。我不是单纯的选择省市区,还可能是选择省市或者省。于是参照此项目基于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 ? 0 : provinceindex; provincecol.selectedindex = provinceindex; this.picker.addcolumn(provincecol); // add city data to picker let citycoldata = this.citiesdata[provincecol.selectedindex].children; let citycol; if (this.level >= 2) { citycol = { name: 'city', options: citycoldata.map(function (city) { return {text: city.name, value: city.code, disabled: false}; }), selectedindex: 0 }; let cityindex = citycoldata.findindex(function (option) { return option.name == values[1]; }); cityindex = cityindex === -1 ? 0 : cityindex; citycol.selectedindex = cityindex; this.picker.addcolumn(citycol); } // add region data to picker let regiondata, regioncol; if (this.level === 3) { regiondata = this.citiesdata[provincecol.selectedindex].children[citycol.selectedindex].children; regioncol = { name: 'region', options: regiondata.map(function (city) { return {text: city.name, value: city.code, disabled: false}; }), selectedindex: 0 }; let regionindex = regiondata.findindex(function (option) { return option.name == values[2]; }); regionindex = regionindex === -1 ? 0 : regionindex; regioncol.selectedindex = regionindex; this.picker.addcolumn(regioncol); } this.divycolumns(this.picker); } /**设置数据显示样式 * @param picker */ private divycolumns(picker) { let pickercolumns = this.picker.getcolumns(); // 获取列数据 let columns = []; pickercolumns.foreach(function (col, i) { columns.push(0); col.options.foreach(function (opt) { if (opt && opt.text && opt.text.length > columns[i]) { columns[i] = opt.text.length; } }); }); if (columns.length === 2) { let width = math.max(columns[0], columns[1]); pickercolumns[0].align = 'right'; pickercolumns[1].align = 'left'; pickercolumns[0].optionswidth = pickercolumns[1].optionswidth = width * 17 + "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 ? citycol.selectedindex : 0; this.regioncol = regioncol ? regioncol.selectedindex : 0; } /** * 设置value * @param newdata */ private setvalue(newdata) { if (newdata === null || newdata === undefined) { this.value = ''; } else { this.value = newdata; } } /** * 获取value值 * @returns {string} */ private getvalue() { return this.value; } /** * 改变value值的显示 * @param val */ private onchange(val) { this.setvalue(this.getstring(val)); } /** * 获取当前选择的地区数据 * @param newdata * @returns {string} */ private getstring(newdata) { if (newdata['city']) { if (newdata['region']) { return "" + 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的文件可以去这里获取:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
上一篇: Angularjs的键盘事件的绑定