返回首页 |

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

[编码]Ionic2+angular4地区选择组件

时间:2017-07-27 编辑:admin

最近在项目重构的过程中,发现之前用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',
 style*********port 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的文件可以去这里获取


浏览:

网站建设

流程

    网站建设流程