欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

利用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的文件可以去这里获取:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。