前端经常会遇到焦点图效果,在使用Element UI时,我们可以选择使用 el-carousel,这里我们简单了解一下:
下载 Element UI (这里就不说按需加载了)
cnpm i element-ui -S
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>