緣起
近期在使用 elementUI 組件庫中的Image組件時，其組件會自帶一個圖片預(yù)覽功能熔脂，僅需要通過 傳入 preview-src-list （需要預(yù)覽的圖片url數(shù)組） 的 prop 即可實現(xiàn)預(yù)覽承匣。
本猿使用了此props，具體代碼如下：
<div class="images_list">
<el-image
v-for="(src, index) in imgList"
:key="index"
:src="src"
:preview-src-list="imgList"
>
</el-image>
</div>
……
data() {
return {
imgList: [
'http://sphenginx.io/images/201042110140.jpg',
'http://sphenginx.io/images/201542110140.jpg',
'http://sphenginx.io/images/202042110140.jpg',
],
}
}
但是發(fā)現(xiàn)锤悄，點擊第二張韧骗、第三張圖片進行預(yù)覽的時候， 會從第一張圖片開始預(yù)覽零聚， 并不會從當前圖片開始預(yù)覽袍暴。 這和點擊當前圖片即預(yù)覽當前圖片的期望不符。
性空
后來查看最大同性交友網(wǎng)站上 element的源碼隶症、 測試發(fā)現(xiàn)有這么幾種解決方案：
- 0政模、preview-src-list只傳入單張圖片數(shù)組（當前圖片數(shù)組），即：
<el-image
v-for="(src, index) in imgList"
:key="index"
:src="src"
:preview-src-list="[src]"
>
這樣可以進行當前圖片的預(yù)覽蚂会，但是無法進行上下圖的切換瀏覽淋样；
- 1、根據(jù)當前的索引動態(tài)傳入
preview-src-list參數(shù)胁住，即：
<el-image
v-for="(src, index) in imgList"
:key="index"
:src="src"
:preview-src-list="getPrivewImages(index)"
>
……
methods: {
// 預(yù)覽對應(yīng)當前圖片列表
getPrivewImages(index) {
let tempImgList = [...this.imgList];//所有圖片地址
if (index == 0) return tempImgList;
// 調(diào)整圖片順序趁猴，把當前圖片放在第一位
let start = tempImgList.splice(index);
let remain = tempImgList.splice(0, index);
return start.concat(remain);//將當前圖片調(diào)整成點擊縮略圖的那張圖片
},
}
這樣也可以實現(xiàn)點擊當前圖片的時候刊咳，就會實時的展示當前圖片預(yù)覽，而且有點擊鍵盤左右箭頭切換圖片的功能儡司，
缺點就是如果圖片很多娱挨，可能要計算多次……
他山之石
今天查看 Element 源碼 El-Image , 發(fā)現(xiàn)其實內(nèi)部有 computed 當前圖片的索引，并且傳遞給 el-image-viewer 了 當前的 initial-index, 按理說應(yīng)該是可以實現(xiàn)自動切換當前圖片的預(yù)覽的捕犬，具體情況還有待深入coding 跷坝。。碉碉。
