我在《ionic3開(kāi)源組件》提到了圖片選擇組件拳魁，但是后來(lái)發(fā)現(xiàn)其實(shí)現(xiàn)功能很簡(jiǎn)單惶桐，而且我不喜歡它寫(xiě)死了寬高大小，這對(duì)于不同分別率不太友好潘懊。于是嘗試實(shí)現(xiàn)了一下姚糊，先上效果圖：
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; //最多可選擇多少?gòu)垐D片，默認(rèn)為4張
@Input() canAdd: boolean = true; //是否允許新增
@Input() canDelete: boolean = true; //是否允許刪除
@Input() images: IImageObj[] = []; //圖片列表,與fileObjListChange形成雙向數(shù)據(jù)綁定
@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';
}
//照片預(yù)覽
onViewImages(index: number) {
//以下代碼自行調(diào)整
let imgCopies = JSON.parse(JSON.stringify(this.images)); //復(fù)制對(duì)象授舟，以免內(nèi)部修改了對(duì)象
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();
}
}
注意
-
onViewImages方法里面我調(diào)用了另一個(gè)封裝的ImageViewer組件叛拷，仿微信用于彈框縮放、滑動(dòng)顯示圖片的岂却，你可以自行封裝自己的方法忿薇。 - 等寬高原理是借用了add.png的維度，利用add.png高度設(shè)置其它圖像的高度躏哩。
- 重要的方法是
ngAfterViewChecked署浩，用于在內(nèi)部調(diào)整圖像高度，為什么用該方法扫尺，先了解下angular組件的生命周期筋栋。
ngAfterViewChecked：每次做完組件視圖和子視圖的變更檢測(cè)之后調(diào)用。
僅拋個(gè)磚正驻，自己做點(diǎn)有趣的組件吧弊攘。
