html结构
<el-carousel
:interval="5000"
v-if="list[0]"
style="border-radius: 10px"
@change="selectChange"
:class="targetClass">
<el-carousel-item
v-for="(item, index) in list"
:key="item.id">
</el-carousel-item>
</el-carousel>
css样式
/deep/.leftnone {
.el-carousel__arrow--left {
display: none !important;
}
}
/deep/.rightnone {
.el-carousel__arrow--right {
display: none !important;
}
}
data数据
list: []
targetIndex: 0
计算属性
computed: {
targetClass() {
let val = this.targetIndex
let str = ''
if (val == 0) {
str += 'leftnone'
}
if (val == this.list.length - 1) {
str += 'rightnone'
}
return str
}
},
change事件
selectChange(val) {
this.targetIndex = val
},
实现效果