Element UI 使用 el-carousel 焦點圖

前端經常會遇到焦點圖效果，在使用Element UI時，我們可以選擇使用 el-carousel，這裡我們簡單了解一下：

下載下傳 Element UI (這裡就不說按需加載了)

main.js引用

import Element from 'element-ui'
Vue.use(Element)
           

使用el-carousel

//這是arr 自己随便寫點資料，例如arr=[{name:"圖一"},{name:"圖二"}]
<el-carousel 
      indicator-position="none"
      :autoplay="false"
      arrow="always"
      @change="changeImgFn"
      :initial-index="ind"
    >
      <el-carousel-item v-for="(m,i) in arr" :key="i">
        {{m.name}}
      </el-carousel-item>
    </el-carousel>
           

export default {
	props:{
		//預設激活下标
		ind :{
	      type : Number,
	      default :0
	    }
	},
	methods :{
		changeImgFn (ind,prevInd){
			console.log(prevInd,'上一張圖下标');
			console.log(ind,'目前激活下标');
		}
	}
}
           

設定是否顯示 左右切換按鈕

//arrow屬性定義了切換箭頭的顯示時機。
//預設情況下，切換箭頭隻有在滑鼠 hover 到走馬燈上時才會顯示；
//若将arrow設定為always，則會一直顯示；
//設定為never，則會一直隐藏。
           

全屏輪播圖效果元件

<template>
  <section class="lb-swiper-img-wrap">
    <slot></slot>
    <el-carousel 
      indicator-position="none"
      :autoplay="false"
      arrow="always"
      @change="changeImgFn"
      :initial-index="ind"
    >
      <el-carousel-item v-for="(m,i) in arr" :key="i">
        <div 
          class="img-box g-cen-cen g-back" 
          :style="[
          {'background-image':'url('+m+')'},
          {'transform':'rotate('+rotateNum+'deg)'}
        ]"
        >
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-row class="swiper-btns-box">
      <i class="iconfont icon-fan" @click="rotateFn('-')"></i>
      <i class="iconfont icon-zheng" @click="rotateFn('+')"></i>
    </el-row>
  </section>

</template>

<script>
export default {
  props :{
    arr :{
      type:Array,
      default:function(){
        return []
      }
    },
    ind :{
      type : Number,
      default :0
    },
    urlType : {
      type :String,
      default:'url'
    }
  },
  data() {
    return {
      rotateNum :0,
      imgIndex:0
    }
  },
  methods :{
    //切換圖檔
    changeImgFn (e) {
      this.imgIndex = e;
      this.rotateNum = 0;
    },
    //旋轉按鈕
    rotateFn(str){
      if(str =='-'){
        this.rotateNum = this.rotateNum  - 90;
      } else{
        this.rotateNum = this.rotateNum  + 90;
      }
    }
  }
}
</script>
<style lang="scss">
.lb-swiper-img-wrap{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  z-index: 3000;
  padding:50px 0 140px;
  .el-carousel{
    height: 100%;
    .el-carousel__container{
      margin:0 200px;
      height: 100%;
      .el-carousel__arrow{
        width: 60px;
        height: 60px;
        background-color: transparent;
        i{
          font-size: 50px;
        }
      }
      .el-carousel__arrow--right{
        right: -130px;
      }
      .el-carousel__arrow--left{
        left: -130px;
      }
      .el-carousel__item{
        .img-box{
          height: 100%;
          background-size: contain;
          max-width: 800px;
          margin:0 auto;
        }
      }
    }
  }
  .swiper-btns-box{
    color: #fff;
    text-align: center;
    padding-top: 50px;
    i{
      font-size: 40px;
      margin:0 30px;
      &:hover{
        cursor: pointer;
      }
    }
  }
  .lb-swiper-head{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    text-align: right;
    .el-icon-close{
      color: #ffff;
      line-height: 50px;
      font-size: 40px;
      margin-right: 30px;
      cursor: pointer;
    }
  }
}
</style>