tips：Element-UI对话框与轮播图综合使用

本文首发我的简书

最近在做一个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小姐姐挺好说话的…

tips：Element-UI对话框与轮播图综合使用

猜你喜欢