本文首發我的簡書

最近在做一個pc後臺管理系統，其中有一個需求是這樣的：在一個圖片列表中點選一個圖片可以檢視大圖而且還要左右切換上一張/下一張(輪播圖)，因為目前專案中用的ui框架是element-ui，我決定將element中的Dialog對話方塊和Carousel走馬燈結合使用。
首先寫一個對話方塊(點選頁面上的圖片顯示對話方塊)：

        <el-dialog :visible.sync="showImg"
                   custom-class="an-img-dialog"
                   :
 
center="true"
                   width="31%">

        </el-dialog>

在全域性樣式中可以設定如下，主要是把header隱藏起來

.an-img-dialog {
    .el-dialog__header {
        height: 0;
        padding: 0;
        background: transparent;
        border: none;
        .el-dialog__headerbtn {
            i {
                color:
 
 #fff;
            }
        }
    }
    .el-dialog__body {
        padding: 0;
    }
}

接下來設定輪播圖

        <el-dialog :visible.sync="showImg"
                   custom-class="an-img-dialog"
                   :center="true"
                   width="31%">
            <el-carousel :autoplay=
 
"false"
                         arrow="always"
                         trigger="click"
                         height="695px"
                         :initial-index="index"
                         ref="carousel">
                <el-carousel-item v-for="(item,index) in imgList" :key="index">
                    <img :src="loadImg(item)" alt="" class="carousel-img">
                </el-carousel-item>
            </el-carousel>
        </el-dialog>

在el-carousel-item標籤中加入輪播圖中需要放的內容，圖片就用img標籤吧。值得一提的是initial-index這個屬性，文件中的說明是這樣的：初始狀態啟用的幻燈片的索引，從 0 開始。然後我竟天真的認為點選時將圖片的索引設定上去就萬事大吉了。

            //點選檢視大圖
            viewDetail(i){
                this.index = i;
            }

而實際效果是這個屬性向如上方法只能設定一次，第一次點選圖片還能顯示正確，後面點選任何一張圖之後，在輪播圖中還只能顯示第一次點選的圖。
這樣的話就需要使用方法了
setActiveItem
說明： 手動切換幻燈片
引數： 需要切換的幻燈片的索引，從 0 開始；或相應 el-carousel-item 的 name 屬性值

於是點選檢視方法可以修改如下：

            //點選檢視大圖
            viewDetail(i){
                this.index = i;
                if(this.$refs.carousel){
                    this.$refs.carousel.setActiveItem(i);
                }
                this.showImg = true;
            }

終於，一個帶遮罩的輪播圖就初步完成了。
最後說說這種方法的缺陷，那就是樣式很固定，箭頭貌似只能放在圖片上面而不能放在圖片的外面，而底部的指示器只能支援element固定的一種樣式，這兩個都是與ui稿不符的，前者還能在全域性樣式中修改一下，後者就不好弄了…不過，還好ui小姐姐挺好說話的…