【组件篇】ionic3均分列等宽高图像显示（上）

IT晴天

发布于 2018-08-20 10:50:53

7600

发布于 2018-08-20 10:50:53

文章被收录于专栏：ionic3+ionic3+

我在《ionic3开源组件》提到了图片选择组件，但是后来发现其实现功能很简单，而且我不喜欢它写死了宽高大小，这对于不同分别率不太友好。于是尝试实现了一下，先上效果图：

image.png

组件名为image-selector

image-selector.html:

<ion-row align-items-center>
  <ion-col col-3 align-self-center *ngFor="let item of images, let i = index">
    <ion-thumbnail tappable (click)="onViewImages(i)">
      <img src="{{item?.originPath}}" class="auto-image" [style.height]="width"/>
    </ion-thumbnail>
  </ion-col>
  <ion-col col-3 align-self-center>
    <ion-thumbnail *ngIf="images && images.length<max && canAdd" tappable (click)="onAddImage()">
      <img #addImage src="assets/imgs/add.png" class="auto-image"/>
    </ion-thumbnail>
  </ion-col>
</ion-row>

image-selector.scss:

image-selector {
  img.auto-image{
    width: 100%;
  }
}

image-selector.ts:

import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import { IonicPage, ModalController, NavParams } from 'ionic-angular';

export interface IImageObj {
  id: string;
  originPath: string;
  thumbPath?: string;
  name?: string;
}
/**
 * Generated class for the ImageSelecterComponent component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */
@Component({
  selector: 'image-selector',
  templateUrl: 'image-selector.html'
})
export class ImageSelectorComponent {

  @Input() max: number = 9;  //最多可选择多少张图片，默认为4张

  @Input() canAdd: boolean = true;  //是否允许新增
  @Input() canDelete: boolean = true;  //是否允许删除
  @Input() images: IImageObj[] = [];   //图片列表,与fileObjListChange形成双向数据绑定

  @Output() addImage = new EventEmitter<any>();
  @Output() selectChanged = new EventEmitter<any>();

  width: string;
  @ViewChild('addImage') img: ElementRef;
  constructor(public modalCtrl: ModalController) {
  }

  onAddImage() {//新增照片
    this.addImage.emit();
  }

  ngAfterViewChecked(){
    this.width = this.img.nativeElement.width + 'px';
  }

  //照片预览
  onViewImages(index: number) {
    //以下代码自行调整
    let imgCopies = JSON.parse(JSON.stringify(this.images));    //复制对象，以免内部修改了对象
    let modal = this.modalCtrl.create('ImageViewerPage', {selectedIndex: index, images: imgCopies, canEdit: this.canDelete});
    modal.onDidDismiss(data =>{
      if(data){
        this.images = data;
        this.selectChanged.emit(data);
      }
    });
    modal.present();
  }
}