[element ui] 自定義 Carousel 走馬燈組件

1、效果圖

2 代碼

<template>
  <div class="upload">
    <el-carousel :autoplay="false" type="card" height="260px" indicator-position="none" ref="carousel" @change="onCarouselChange" v-loading="uploadLoading" element-loading-text="上傳中...">
      <el-carousel-item v-for="(item, index) in uploadList" :key="index">
        <img :src="item" alt style="width: 100%;height: 260px;" />
      </el-carousel-item>
      <div class="no-img" v-if="uploadList.length <= 0">暫無圖片，請選擇圖片進行上傳！</div>
    </el-carousel>
    <div class="upload-warp">
      <div class="upload-warp-left" @click="handlePrev">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="upload-warp-center">
        <div v-for="(item, index) in uploadList" :key="item" class="upload-warp-center-img">
          <img :src="item" alt :class="imgActiveIndex == index ? 'img-br' : ''" @click="handleImgClick(index)" />
          <i class="el-icon-close" @click="handleDelImg(index)"></i>
        </div>
        <el-upload :action="uploadUrl" :show-file-list="false" list-type="picture-card" :on-progress="handleAvatarProgress" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" accept=".jpg, .jpeg, .png, .gif, .pdf, .doc, .docx, .xls, .xlsx, .JPG, .JPEG, .PBG, .GIF, .PDF, .DOC, .DOCX, .XLS, .XLSX" v-if="uploadList.length < 5">
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div class="upload-warp-left" @click="handleNext">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "carouselUpload",
  data() {
    return {
      uploadList: [],
      imgActiveIndex: 0,
      uploadLoading: false,
      uploadUrl: "https://jsonplaceholder.typicode.com/posts/"
    };
  },
  methods: {
    // carousel 改變時
    onCarouselChange(index) {
      this.imgActiveIndex = index;
    },

    // 文件上傳時的鉤子
    handleAvatarProgress() {
      this.uploadLoading = true;
    },

    // 文件上傳成功時的鉤子
    handleAvatarSuccess(res, file) {
      this.uploadList.push(URL.createObjectURL(file.raw));
      this.uploadLoading = false;
      this.$message.success("圖片上傳成功");
    },

    // 文件上傳失敗時的鉤子
    handleAvatarError() {
      this.$message.warning("圖片上傳失敗");
      this.uploadLoading = false;
    },

    // 底部圖片導航列表
    handleImgClick(index) {
      this.imgActiveIndex = index;
      this.$refs.carousel.setActiveItem(index);
    },

    // 底部圖片導航列表當前項刪除
    handleDelImg(index) {
      this.uploadList.splice(index, 1);
    },

    // 底部圖片導航列表上一張
    handlePrev() {
      if (!this.uploadList.length) return;
      if (this.imgActiveIndex === 0) {
        this.imgActiveIndex = this.uploadList.length;
      }
      this.imgActiveIndex--;
      this.$refs.carousel.setActiveItem(this.imgActiveIndex);
    },

    // 底部圖片導航列表下一張
    handleNext() {
      if (!this.uploadList.length) return;
      if (this.imgActiveIndex >= this.uploadList.length - 1) {
        this.imgActiveIndex = 0;
      } else {
        this.imgActiveIndex++;
      }
      this.$refs.carousel.setActiveItem(this.imgActiveIndex);
    }
  }
};
</script>

<style lang="scss" scoped>
.upload {
  .upload-warp {
    display: flex;
    height: 60px;
    margin-top: 20px;
    &-left {
      flex-basis: 36px;
      line-height: 60px;
      text-align: center;
      font-size: 28px;
      color: #cccccc;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover {
        color: gray;
        transition: all 0.3s ease;
      }
    }
    &-center {
      flex-basis: calc(100% - 72px);
      display: flex;
      &-img {
        width: 20%;
        position: relative;
        border-radius: 2px;
        margin: 0 4px 0;
        img {
          width: 100%;
          height: 60px;
          box-sizing: border-box;
          border-radius: 2px;
          border: 1px solid transparent;
        }
        .img-br {
          border: 1px solid #09f;
        }
        i {
          position: absolute;
          right: -5px;
          top: -10px;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background: #09f;
          color: white;
          border-radius: 100%;
          cursor: pointer;
          transition: all 0.3s ease;
          opacity: 0;
        }
        &:hover i {
          opacity: 1;
          transition: all 0.3s ease;
        }
      }
    }
  }
}
</style>

<style scoped>
.upload-warp-center >>> .el-upload--picture-card {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
.upload >>> .no-img {
  height: 260px;
  line-height: 260px;
  color: #c0c4cc;
  background: #f5f7fa;
  text-align: center;
}
</style>