您好,登錄后才能下訂單哦!
本來在看vue.js沒多久,最近在趕一個(gè)項(xiàng)目用回了angular2,還是先把ng2搞定吧,畢竟還不怎么懂。這兩天我做的是用戶表單數(shù)據(jù)的提交,大部分很簡單,雙向綁定就完事了,主要還是溝通的問題哈哈哈哈,雖然溝通的時(shí)候有點(diǎn)暴躁想甩鍋,不過出了門還是高高興興吃飯高高興興回去。
好了切入問題。這幾天做得最久的是仿照微信UI做的圖片上傳/顯示縮略圖/預(yù)覽/刪除功能,要求圖片1--9張。下面來記錄下如何實(shí)現(xiàn)微信的圖片預(yù)覽/刪除功能。
樣式--weui.css
樣式用的是微信官方ui,weui.min.css(生產(chǎn)環(huán)境下建議使用此壓縮版)。
下載地址weui.css/weui.min.css。
樣例--weui.io
微信官方自帶了demo: weui.io。
主要步驟
在正式進(jìn)入各個(gè)小功能的解說前,先上官方demo->weui.io查看圖片上傳組件的樣式以及源代碼。
官方ui顯示如下,圖片上傳的ui在Uploader中。
圖片上傳的源碼從審查元素中可獲取,如下所示:
<div class="page uploader js_show"> <div class="page__hd"> <h2 class="page__title">Uploader</h2> <p class="page__desc">上傳組件,一般配合<a class="link" href=" " rel="external nofollow" >組件Gallery</a >來使用。</p > </div> <div class="page__bd"> <div class="weui-gallery" id="gallery" > <span class="weui-gallery__img" id="galleryImg" ></span> <div class="weui-gallery__opr"> <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="weui-gallery__del"> <i class="weui-icon-delete weui-icon_gallery-delete"></i> </a > </div> </div> <div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-cell__bd"> <div class="weui-uploader"> <div class="weui-uploader__hd"> <p class="weui-uploader__title">圖片上傳</p > <div class="weui-uploader__info">0/2</div> </div> <div class="weui-uploader__bd"> <ul class="weui-uploader__files" id="uploaderFiles"> <li class="weui-uploader__file" ></li> <li class="weui-uploader__file" ></li> <li class="weui-uploader__file" ></li> <li class="weui-uploader__file weui-uploader__file_status" > <div class="weui-uploader__file-content"> <i class="weui-icon-warn"></i> </div> </li> <li class="weui-uploader__file weui-uploader__file_status" > <div class="weui-uploader__file-content">50%</div> </li> </ul> <div class="weui-uploader__input-box"> <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple=""> </div> </div> </div> </div> </div> </div> </div> <div class="page__ft j_bottom"> <a href="javascript:home()" rel="external nofollow" >< img src="./images/icon_footer_link.png"></a > </div> </div>
觀察上面的代碼,外層樣式直接套用,核心功能塊如下:
圖片預(yù)覽/刪除部分:
<div class="weui-gallery" id="gallery"> <!--顯示預(yù)覽--> <span class="weui-gallery__img" id="galleryImg"></span> <!--刪除按鈕--> <div class="weui-gallery__opr"> <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="weui-gallery__del"> <i class="weui-icon-delete weui-icon_gallery-delete"></i></a > </div> </div> 圖片縮略圖列表部分: <ul class="weui-uploader__files" id="uploaderFiles"> <!--每張圖片是一個(gè)<li>標(biāo)簽--> <li class="weui-uploader__file" ></li> </ul>
有了上面的準(zhǔn)備,下載就可以對功能進(jìn)行實(shí)現(xiàn)了:
1. 圖片縮略圖顯示
觀察源碼可知,每張圖片的縮略圖的代碼結(jié)構(gòu)如下:
<li class="weui-uploader__file" ></li>
他將圖片的url直接放到了background-img:url()屬性中,樣式直接使用微信的官方ui的class。因此,我們可以做這樣操作:創(chuàng)建一個(gè)數(shù)組存picturesUrl放圖片的url,用angular2的指令*ngFor根據(jù)數(shù)組中的內(nèi)容動態(tài)生成縮略圖列表(注意picturesUrl中元素的格式為:url(圖片的url)):,圖片url數(shù)組中的每個(gè)元素依次存進(jìn)中間變量img中,然后使用angular2指令[ngStyle]根據(jù)img的值生成預(yù)覽圖,主要代碼如下:
<ul class="weui-uploader__files picture-preview" id="uploaderFiles" > <li *ngFor="let img of picturesUrl" class="weui-uploader__file" [ngStyle]="{'background-image':img}"> </li> </ul> <!--img實(shí)例--> <!--'url(http://upload-images.jianshu.io/upload_images/7166236-ed8a621900728c39.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)'-->
在ts文件中定義圖片數(shù)組并且給一定的模擬數(shù)據(jù):
picturesUrl = [ 'url(http://upload-images.jianshu.io/upload_images/7166236-40ed406c30ef20a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', 'url(http://upload-images.jianshu.io/upload_images/7166236-d79762ed654342bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', 'url(http://upload-images.jianshu.io/upload_images/7166236-64e1a458e5e29d59.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', 'url(http://upload-images.jianshu.io/upload_images/7166236-9a267a540acb8688.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', 'url(http://upload-images.jianshu.io/upload_images/7166236-283f5687cb73eea8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', ]; //存儲圖片Url title = 'app'; shown = false; //是否顯示預(yù)覽,初始化為否 selectImageUrl: string; //用于存放選中圖片的url
2. 圖片預(yù)覽顯示與消失
此處圖片預(yù)覽使用原生自帶的方法,微信的做法應(yīng)該是通過[ngStyle]來控制整個(gè)<div>樣式,而我采用了與生成縮略圖相同的方法,用[ngStyle]指令以及*ngIf指令控制預(yù)覽圖的顯示,然后在預(yù)覽圖的范圍上綁定一個(gè)點(diǎn)擊事件(click)="touchEvent()",用于監(jiān)聽用戶的點(diǎn)擊,實(shí)現(xiàn)點(diǎn)擊退出預(yù)覽的功能。主要代碼如下:
微信的做法(根據(jù)點(diǎn)擊頁面獲取到的代碼):
<!--預(yù)覽隱藏的樣式--> <div class="weui-gallery" id="gallery" > </div> <!--預(yù)覽顯示的樣式--> <div class="weui-gallery" id="gallery" > </div>
我采用的做法:
<div class="weui-gallery" id="gallery" *ngIf="shown"> <span class="weui-gallery__img" (click)="touchEvent()" [ngStyle]="{'background-image':selectImageUrl}"></span> <div class="weui-gallery__opr"> <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" (click)="onDelete()" class="weui-gallery__del"> <i class="weui-icon-delete weui-icon_gallery-delete"></i> </a > </div> </div>
//點(diǎn)擊縮略圖顯示預(yù)覽 showPicture($event){ console.log("$event.target.backgroundImage:" + $event.target.style.backgroundImage); this.selectImageUrl = $event.target.style.backgroundImage; this.shown = true; } //點(diǎn)擊屏幕退出預(yù)覽 touchEvent(){ this.shown = false; }
3. 圖片刪除
圖片刪除的主要代碼嵌套在圖片預(yù)覽的代碼塊中,只要為刪除部分綁定一個(gè)點(diǎn)擊事件((click)="onDelete()"),點(diǎn)擊時(shí)出發(fā)刪除并且退出預(yù)覽即可。
onDelete(){ if(isUndefined(this.selectImageUrl)){ console.log("查看圖片預(yù)覽,圖片url未定義,this.selectImageUrl:" + this.selectImageUrl); return; } //正則去除URL中的雙引號 this.selectImageUrl = this.selectImageUrl.replace(/"/g,""); console.log("(this.picturesUrl.indexOf(this.selectImageUrl):"+this.picturesUrl.indexOf(this.selectImageUrl)); //判斷圖片URL是否存在 if(this.picturesUrl.indexOf(this.selectImageUrl)!== -1){ this.picturesUrl.splice(this.picturesUrl.indexOf(this.selectImageUrl) , 1); setTimeout(()=>{ this.shown = false; }, 20); }else{ console.log("刪除圖片出錯(cuò),獲取URL或URL格式出錯(cuò)出錯(cuò):" + this.selectImageUrl ) } }
效果如下:
顯示縮略圖:
顯示預(yù)覽:
點(diǎn)擊下面的刪除欄:
好了,有時(shí)間再附上源碼和在線demo。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。