本來(lái)在看vue.js沒(méi)多久，最近在趕一個(gè)項(xiàng)目用回了angular2，還是先把ng2搞定吧，畢竟還不怎么懂。這兩天我做的是用戶表單數(shù)據(jù)的提交，大部分很簡(jiǎn)單，雙向綁定就完事了，主要還是溝通的問(wèn)題哈哈哈哈，雖然溝通的時(shí)候有點(diǎn)暴躁想甩鍋，不過(guò)出了門(mén)還是高高興興吃飯高高興興回去。
創(chuàng)新互聯(lián)建站專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、網(wǎng)站建設(shè)、單縣網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)公司、單縣網(wǎng)絡(luò)營(yíng)銷(xiāo)、單縣企業(yè)策劃、單縣品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供單縣建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
好了切入問(wèn)題。這幾天做得最久的是仿照微信UI做的圖片上傳/顯示縮略圖/預(yù)覽/刪除功能，要求圖片1--9張。下面來(lái)記錄下如何實(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è)小功能的解說(shuō)前，先上官方demo->weui.io查看圖片上傳組件的樣式以及源代碼。
官方ui顯示如下，圖片上傳的ui在Uploader中。
圖片上傳的源碼從審查元素中可獲取，如下所示：
觀察上面的代碼，外層樣式直接套用，核心功能塊如下：
圖片預(yù)覽/刪除部分：
有了上面的準(zhǔn)備，下載就可以對(duì)功能進(jìn)行實(shí)現(xiàn)了:
1. 圖片縮略圖顯示
觀察源碼可知，每張圖片的縮略圖的代碼結(jié)構(gòu)如下：
他將圖片的url直接放到了background-img:url()屬性中，樣式直接使用微信的官方ui的class。因此，我們可以做這樣操作：創(chuàng)建一個(gè)數(shù)組存picturesUrl放圖片的url，用angular2的指令*ngFor根據(jù)數(shù)組中的內(nèi)容動(dòng)態(tài)生成縮略圖列表（注意picturesUrl中元素的格式為：url(圖片的url)）：，圖片url數(shù)組中的每個(gè)元素依次存進(jìn)中間變量img中，然后使用angular2指令[ngStyle]根據(jù)img的值生成預(yù)覽圖，主要代碼如下：
在ts文件中定義圖片數(shù)組并且給一定的模擬數(shù)據(jù)：
picturesUrl = [ 'url(/upload/otherpic72/7166236-40ed406c30ef20a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', 'url(/upload/otherpic72/7166236-d79762ed654342bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', 'url(/upload/otherpic72/7166236-64e1a458e5e29d59.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', 'url(/upload/otherpic72/7166236-9a267a540acb8688.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', 'url(/upload/otherpic72/7166236-283f5687cb73eea8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)', ]; //存儲(chǔ)圖片Url title = 'app'; shown = false; //是否顯示預(yù)覽，初始化為否 selectImageUrl: string; //用于存放選中圖片的url
2. 圖片預(yù)覽顯示與消失
此處圖片預(yù)覽使用原生自帶的方法，微信的做法應(yīng)該是通過(guò)[ngStyle]來(lái)控制整個(gè)
微信的做法（根據(jù)點(diǎn)擊頁(yè)面獲取到的代碼）：
我采用的做法：
重慶分公司
重慶分公司
//點(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中的雙引號(hào)
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。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
