使用情景
1、在跑马灯组件的每个跑马灯页面里,只展示3条数据;
2、使用自己写的左右箭头来切换跑马灯,跑马灯第一页时不展示左侧箭头按钮,最后一页时隐藏右侧箭头;
上代码:
html 代码
<el-row>
<el-col :span="1">
<div v-if="showLeftArrow" style="background-color: #f9fbfd;height: 65px;"
@click="arrowClick('left')" class="arrow_icon">
<i class="el-icon-arrow-left arrow_icon_style"></i>
</div>
</el-col>
<el-col :span="21">
<el-carousel ref="carouselCard" trigger="click" indicator-position="none" :autoplay="false"
arrow="never" :loop="false" height="65px" @change="carouselChange">
<!-- Math.ceil(leftData.length/3) Math.ceil() 1、向上取整; 2、数组总长度除以3,用于计算数组中每三个对象一组可以有组,也就是跑马灯的总页数-->
<el-carousel-item v-for="(item, i) in Math.ceil(leftData.length/3)" :key="i">
<el-row class="carousel_box" justify="space-between" :gutter="10">
<el-col :span="8" v-for="(item, index) in leftData" style="min-width: 125px;">
<!-- parseInt() 函数可解析一个字符串,并返回一个整数。 判断当前leftData对象的索引是否在当前的跑马灯页面中(i*3 <= 当前leftData对象的索引 < (i+1)*3) -->
<div v-if="i === parseInt(index/3) && (3*i)<= index <3*(i+1)"
@click="blockClick(item.num)"
:class="i === parseInt(index/3) && (3*i)<= index <3*(i+1) ? 'block':'hide'">
<div class="block_image">
<el-image style="width: 23px; height: 23px" :src="item.url"></el-image>
</div>
<div>
<div class="block_number">{{item.num}}</div>
<div class="block_text">{{item.msg}}</div>
</div>
</div>
</el-col>
</el-row>
</el-carousel-item>
</el-carousel>
</el-col>
<el-col :span="1">
<div v-if="showRightArrow" style="background-color: #f9fbfd;height: 65px;" class="arrow_icon"
@click="arrowClick('rigth')">
<i class="el-icon-arrow-right arrow_icon_style"></i>
</div>
</el-col>
</el-row>
javascript 代码
<script>
export default {
name: "CenterBox",
data() {
return {
showLeftArrow: false,
showRightArrow: true,
leftData: [{
url: require('../../../../assets/1.png'),
msg: '待审核',
num: 0
},
{
url: require('../../../../assets/2.png'),
msg: '待完成任务',
num: 0
},
{
url: require('../../../../assets/3.png'),
msg: '待查看通知',
num: 0
},
{
url: require('../../../../assets/4.png'),
msg: '待处理事项',
num: 0
}
]
};
},
methods: {
carouselChange(index) {
this.showLeftArrow = index < 1 ? false : true;
// Math.ceil(this.leftData.length / 3) 根据数组计算跑马灯的页数
this.showRightArrow = index == (Math.ceil(this.leftData.length / 3) - 1) ? false : true;
},
blockClick(valNum) {
if (valNum == 0) {
this.$message({
message: '暂无待办事项...',
type: 'warning'
});
}
},
arrowClick(val) {
if (val == 'left') {
this.$refs.carouselCard.prev();
} else {
this.$refs.carouselCard.next();
}
}
},
};
</script>