緣起

近期在使用 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 。。。