Vue 轮播图 展示及点击图片放大

---Vue 轮播图 展示及点击图片放大

---@click = "cancelStyle" 解决 点击图片后 body 新增属性 display 使得页面不能滑动

点击图片放大

使用elementui组件image的属性–previewSrcList

elementui的引用就不多做叙述了，毕竟使用这个方法就默认项目已经使用elmentui了 image组件：element.eleme.cn/#/zh-CN/com… 但是一般实际应用中，url和srcList根据后台获取数据设置的 1.html：（设置属性:preview-src-list=“srcList”）

 <el-carousel :autoplay="false" height="600px" direction="vertical">
                  <el-carousel-item
                    arrow="never"
                    v-for="(item, key) in imgList"
                    :key="key"
                  >
                    <el-image :src="item" @click="cancelStyle"  style="width:100%;height:100%" :preview-src-list="getSrcList(key)">
                      <div slot="placeholder" class="image-slot">
                        加载中
                        <span class="dot">...</span>
                      </div>
                    </el-image>
                  </el-carousel-item>
                </el-carousel>
  //js
  methods:{
   getList() {
      this.loading = true;
      const id = this.$route.query.id;
      getdetail(id).then((response) => {
        this.form = response.data;
        this.loading = false;
        console.log(this.form)
        // 返回图片处理
        this.imgList = eval("(" + this.form.questionImageUrl + ")");
        console.log(this.imgList);
        this.loading = false;
      });
    },
    // 点击页面取消样式
   cancelStyle() {
      document.body.style = null;
    },
    // 点击图片放大
    getSrcList(key) {
      return this.imgList.slice(key).concat(this.imgList.slice(0, key));
    },
  }