vue el-carousel走马灯实现显示多张（5张）和（7张）
父组件不用修改，仅在子组件源码的基础上进行修改即可
直接上代码
<template><div><el-carousel v-if="type=='item5_xybjzq' || type=='item5_qdbjzq'" :interval="400000" type="card" height="120px" indicator-position=none ref="myCarousel"><div class="el-carousel_div_bg"><div ></div></div><myCarsouselItem v-for="(item,index) in allYxbjMsgs" :key="index":class="{'el-carousel__item_buy':item.type=='buy','el-carousel__item_sale':item.type=='sale',}"><div class="div-label"><div><span>{{item.name}}</span><span class="font-style-12 span-padding">{{item.title}}</span></div><div class="div-container_center div-padding"><span class="font-style-20">{{item.num}}</span>万</div><div ><i class="el-icon el-icon_position"></i><span class="font-style-12">{{item.position}}</span></div><div class="div-padding2"><i class="el-icon el-icon_phone"></i><span class="font-style-12">{{item.phone}}</span></div></div></myCarsouselItem></el-carousel><el-carousel v-if="type=='item5_dljybj' || type=='item5_zsssbbj'" :interval="400000" type="card" height="120px" indicator-position=none ref="myCarousel"><myCarsouselItem2 v-for="(item,index) in allQdbjMsgs" :key="index":class="{'el-carousel__item_dljybj':type=='item5_dljybj','el-carousel__item_zsssbbj':type=='item5_zsssbbj',}"><div class="div-label div-wbqs"><div class="div-padding3"><span class="font-style-20">{{item.title}}</span></div><div class="div-padding2 font-style-12">报价系统评级<span class="font-style-20">{{item.bjxtpj}}</span></div><div class="div-padding2 font-style-12">打包价格<span>{{item.dbjg}}</span></div><div class="div-padding2 font-style-12">产品期限<span>{{item.cpqx}}</span></div><div class="div-padding2 font-style-12">产品额度<span>{{item.cped}}</span></div></div></myCarsouselItem2></el-carousel></div>
</template>
<script>
import myCarsouselItem from './item-zrscbj.vue';
import myCarsouselItem2 from './item-wbqs.vue';
export default {name: 'PaperPart',props: {type:{type: String,require: true},},components: {myCarsouselItem,myCarsouselItem2},data () {return {//paperList: [],allYxbjMsgs: [{name: "张三",type:"buy",title:"拟买入私募12号",num: "300",position: "济南二环东路营业部",phone: "15088888888",},{name: "李四",type:"sale",title:"拟买入私募12号",num: "280",position: "济南二环东路营业部",phone: "15088888888",},{name: "王五",type:"buy",title:"拟买入私募12号",num: "500",position: "济南二环东路营业部",phone: "15088888888",},{name: "赵六",type:"buy",title:"拟买入私募12号",num: "120",position: "济南二环东路营业部",phone: "15088888888",},{name: "小七",type:"sale",title:"拟买入私募12号",num: "350",position: "济南二环东路营业部",phone: "15088888888",},// {// name: "106",// bjMsg: "拟卖出100万 私募6号",// lxOrg: "xxx营业部",// phone: "15088888888",// },// {// name: "107",// bjMsg: "拟卖出100万 私募6号",// lxOrg: "xxx营业部",// phone: "15088888888",// },// {// name: "108",// bjMsg: "拟卖出100万 私募6号",// lxOrg: "xxx营业部",// phone: "15088888888",// },// {// name: "109",// bjMsg: "拟卖出100万 私募6号",// lxOrg: "xxx营业部",// phone: "15088888888",// },// {// name: "110",// bjMsg: "拟卖出100万 私募6号",// lxOrg: "xxx营业部",// phone: "15088888888",// },],allQdbjMsgs: [{title: "九州证券1",bjxtpj: "BB",dbjg: "3.3%",cpqx: "12月期",cped: "1亿元",},{title: "华兴证券2",bjxtpj: "BB",dbjg: "3.0%",cpqx: "12月期",cped: "2亿元",},{title: "中泰证券3",bjxtpj: "AA",dbjg: "3.5%",cpqx: "12月期",cped: "4亿元",},{title: "中信证券4",bjxtpj: "BB",dbjg: "2.3%",cpqx: "12月期",cped: "3千万元",},{title: "华泰证券5",bjxtpj: "BB",dbjg: "3.3%",cpqx: "12月期",cped: "1亿元",},{title: "中信建投证券6",bjxtpj: "BB",dbjg: "3.3%",cpqx: "12月期",cped: "5000万元",},{title: "中原证券7",bjxtpj: "BB",dbjg: "3.3%",cpqx: "12月期",cped: "1亿元",},{title: "招商证券8",bjxtpj: "BB",dbjg: "3.3%",cpqx: "12月期",cped: "1000万元",},],}},mounted(){},methods: {},
}
</script>
<style lang="scss" scoped>
.el-carousel_div_bg{width: 100%;height: 90%;position: relative; div{position: absolute;top:20px;left:29px;width: 93%;height: 80%;background: url("~@/assets/images/information-show/carousel-bg.png") no-repeat;background-size: cover;background-position: center;}
}
.div-wbqs{padding-left: 25px !important;
}
.div-label{padding: 10px 10px 5px 15px;.div-container_center{display: flex;justify-content: center;align-items: center;.font-style-20{font-weight: bold;font-size: 20px;line-height: 23px;}}.span-padding{padding-left: 10px;}.div-padding{padding:8px 0;}.div-padding2{padding-top:4px;}.div-padding3{padding-bottom:8px;}.el-icon{height: 14px;width: 14px;margin-right: 5px;text-align: left;vertical-align: middle;display:inline-flex;}.font-style-12{font-weight: 500;font-size: 12px;line-height: 14px;text-align: left;font-style: normal;text-transform: none;span{padding-left: 10px;}}
}
.el-carousel__item_buy {background: url("~@/assets/images/information-show/bg_cardG_01.png") no-repeat;background-size: cover;color: #995200;.el-icon_position{background: url("~@/assets/images/information-show/icon_01.png") no-repeat;}.el-icon_phone{background: url("~@/assets/images/information-show/icon_02.png") no-repeat;}
}.el-carousel__item_sale {background: url("~@/assets/images/information-show/bg_cardP_02.png") no-repeat;background-size: cover;color: #1D3864;.el-icon_position{background: url("~@/assets/images/information-show/icon_position_02.png") no-repeat;}.el-icon_phone{background: url("~@/assets/images/information-show/icon_phone_01.png") no-repeat;}
}.el-carousel__item_dljybj {background: url("~@/assets/images/information-show/bg_card_03.png") no-repeat;background-size: cover;color: #995200;
}
.el-carousel__item_zsssbbj {background: url("~@/assets/images/information-show/icon_card_04.png") no-repeat;background-size: cover;color: #1D3864;
}
.el-carousel__item{border-radius:10px;box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
}
</style>
下面是显示5张的子组件代码：
<template><divv-show="ready"class="el-carousel__item":class="{'is-active': active,'el-carousel__item--card': $parent.type === 'card','is-in-stage': inStage,'specialIndex': specialIndex,'is-hover': hover,'is-animating': animating}"@click="handleItemClick":style="itemStyle"><divv-if="$parent.type === 'card'"v-show="!active"class="el-carousel__mask"></div><slot></slot></div>
</template><script>import { autoprefixer } from 'element-ui/src/utils/util';//const CARD_SCALE = 0.83;export default {name: 'ElCarouselItem',props: {name: String,label: {type: [String, Number],default: ''},},data() {return {hover: false,translate: 0,scale: 1,active: false,ready: false,inStage: false,specialIndex: false,animating: false};},methods: {processIndex(index, activeIndex, length) {let index_=-10;if(activeIndex == 0) {switch(index){case length-2: index_=-2; break;case length-1: index_=-1; break;case activeIndex: index_=0; break;case 1: index_=1; break;case 2: index_=2; break;default:index_=-10;}return index_;}if(activeIndex == 1) {switch(index){case length-1: index_=-2; break;case 0: index_=-1; break;case activeIndex: index_=0; break;case 2: index_=1; break;case 3: index_=2; break;default:index_=-10;}return index_;} else if(activeIndex == length-2){switch(index){case length-4: index_=-2; break;case length-3: index_=-1; break;case activeIndex: index_=0; break;case length-1: index_=1; break;case 0: index_=2; break;default:index_=-10;}return index_;}else if(activeIndex == length-1){switch(index){case length-3: index_=-2; break;case length-2: index_=-1; break;case activeIndex: index_=0; break;case 0: index_=1; break;case 1: index_=2; break;default:index_=-10;}return index_;}else if(activeIndex >= 2) {switch(index){case activeIndex-2: index_=-2; break;case activeIndex-1: index_=-1; break;case activeIndex: index_=0; break;case activeIndex+1: index_=1; break;case activeIndex+2: index_=2; break;default:index_=-10;}return index_;}},calcCardTranslate(index, activeIndex) {const parentWidth = this.$parent.$el.offsetWidth;if(index == 0){return parentWidth*(0.5-0.22/2)}else if(Math.abs(index) == 1){return index>0?parentWidth*(0.5+0.22/2-0.08):parentWidth*(0.5-(0.28-0.08+0.22/2));}else{return index>0?parentWidth*(0.5+0.22/2+0.28-0.08-0.13):parentWidth*(0.5-(0.28-0.08+0.22/2)-(0.28-0.13));}},calcTranslate(index, activeIndex, isVertical) {const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];return distance * (index - activeIndex);},translateItem(index, activeIndex, oldIndex) {const parentType = this.$parent.type;const parentDirection = this.parentDirection;const length = this.$parent.items.length;if (parentType !== 'card' && oldIndex !== undefined) {this.animating = index === activeIndex || index === oldIndex;}index = this.processIndex(index, activeIndex, length);if (parentType === 'card') {if (parentDirection === 'vertical') {console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');}this.inStage = Math.round(Math.abs(index)) <= 1;this.specialIndex = Math.round(Math.abs(index)) >= 3;this.active = index === 0;this.translate = this.calcCardTranslate(index, activeIndex);this.scale = Math.abs(index)==0 ? 1 : Math.abs(index)==1? 0.9 : Math.abs(index)==2? 0.8 : 0.7;} else {this.active = index === activeIndex;const isVertical = parentDirection === 'vertical';this.translate = this.calcTranslate(index, activeIndex, isVertical);}this.ready = true;},handleItemClick() {const parent = this.$parent;if (parent && parent.type === 'card') {const index = parent.items.indexOf(this);parent.setActiveItem(index);}}},computed: {parentDirection() {return this.$parent.direction;},itemStyle() {const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;const style = {transform: value};return autoprefixer(style);}},created() {this.$parent && this.$parent.updateItems();},destroyed() {this.$parent && this.$parent.updateItems();}};
</script>
<style lang="scss">.el-carousel__item--card {width: 28%;}.el-carousel__arrow--left {left: 15px;}.el-carousel__arrow--right {right: 15px;}.el-carousel__item {cursor: pointer;z-index: 1;}.el-carousel__item--card.is-in-stage {z-index: 2;.el-carousel__mask{display: none;}}.el-carousel__item--card.is-active {z-index: 3;width: 22%;}.specialIndex{z-index: 0}
</style>
下面是显示7张的子组件代码：
<template><divv-show="ready"class="el-carousel__item":class="{'is-active': active,'el-carousel__item--card': $parent.type === 'card','is-in-stage': inStage,'specialIndex': specialIndex,'is-hover': hover,'is-animating': animating}"@click="handleItemClick":style="itemStyle"><divv-if="$parent.type === 'card'"v-show="!active"class="el-carousel__mask"></div><slot></slot></div>
</template><script>import { autoprefixer } from 'element-ui/src/utils/util';//const CARD_SCALE = 0.83;export default {name: 'ElCarouselItem',props: {name: String,label: {type: [String, Number],default: ''},},data() {return {hover: false,translate: 0,scale: 1,active: false,ready: false,inStage: false,specialIndex: false,animating: false};},methods: {processIndex(index, activeIndex, length) {let index_=-10;if(activeIndex == 0) {switch(index){case length-3: index_=-3; break;case length-2: index_=-2; break;case length-1: index_=-1; break;case activeIndex: index_=0; break;case 1: index_=1; break;case 2: index_=2; break;case 3: index_=3; break;default:index_=-10;}return index_;}if(activeIndex == 1) {switch(index){case length-2: index_=-3; break;case length-1: index_=-2; break;case 0: index_=-1; break;case activeIndex: index_=0; break;case 2: index_=1; break;case 3: index_=2; break;case 4: index_=3; break;default:index_=-10;}return index_;}if(activeIndex == 2) {switch(index){case length-1: index_=-3; break;case 0: index_=-2; break;case 1: index_=-1; break;case activeIndex: index_=0; break;case 3: index_=1; break;case 4: index_=2; break;case 5: index_=3; break;default:index_=-10;}return index_;}else if(activeIndex == length-3){switch(index){case length-6: index_=-3; break;case length-5: index_=-2; break;case length-4: index_=-1; break;case activeIndex: index_=0; break;case length-2: index_=1; break;case length-1: index_=2; break;case 0: index_=3; break;default:index_=-10;}return index_;}else if(activeIndex == length-2){switch(index){case length-5: index_=-3; break;case length-4: index_=-2; break;case length-3: index_=-1; break;case activeIndex: index_=0; break;case length-1: index_=1; break;case 0: index_=2; break;case 1: index_=3; break;default:index_=-10;}return index_;}else if(activeIndex == length-1){switch(index){case length-4: index_=-3; break;case length-3: index_=-2; break;case length-2: index_=-1; break;case activeIndex: index_=0; break;case 0: index_=1; break;case 1: index_=2; break;case 2: index_=3; break;default:index_=-10;}return index_;}else if(activeIndex >= 3) {switch(index){case activeIndex-3: index_=-3; break;case activeIndex-2: index_=-2; break;case activeIndex-1: index_=-1; break;case activeIndex: index_=0; break;case activeIndex+1: index_=1; break;case activeIndex+2: index_=2; break;case activeIndex+3: index_=3; break;default:index_=-10;}return index_;}},calcCardTranslate(index, activeIndex) {const parentWidth = this.$parent.$el.offsetWidth;if(index == 0){return parentWidth*(0.5-0.28/2)}else if(Math.abs(index) == 1){return index>0?parentWidth*(0.5+0.28/2)+10:parentWidth*(0.5-0.28/2-0.28)-10;}else if(Math.abs(index) == 2){return index>0?parentWidth*(0.5+0.28/2)+40:parentWidth*(0.5-0.28/2-0.28)-40;}else if(Math.abs(index) == 3){return index>0?parentWidth*(0.5+0.28/2)+70:parentWidth*(0.5-0.28/2-0.28)-70;}else{return index>0?parentWidth*(0.5+0.28/2):parentWidth*(0.5-0.28/2-0.28);}},calcTranslate(index, activeIndex, isVertical) {const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];return distance * (index - activeIndex);},translateItem(index, activeIndex, oldIndex) {const parentType = this.$parent.type;const parentDirection = this.parentDirection;const length = this.$parent.items.length;if (parentType !== 'card' && oldIndex !== undefined) {this.animating = index === activeIndex || index === oldIndex;}index = this.processIndex(index, activeIndex, length);if (parentType === 'card') {if (parentDirection === 'vertical') {console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');}this.inStage = Math.round(Math.abs(index)) <= 1;this.specialIndex = Math.round(Math.abs(index)) >= 3;this.active = index === 0;this.translate = this.calcCardTranslate(index, activeIndex);this.scale = Math.abs(index)<=1 ? 1 : Math.abs(index)==2? 0.90 : Math.abs(index)==3? 0.8 : 0.7;} else {this.active = index === activeIndex;const isVertical = parentDirection === 'vertical';this.translate = this.calcTranslate(index, activeIndex, isVertical);}this.ready = true;},handleItemClick() {const parent = this.$parent;if (parent && parent.type === 'card') {const index = parent.items.indexOf(this);parent.setActiveItem(index);}}},computed: {parentDirection() {return this.$parent.direction;},itemStyle() {const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;const style = {transform: value};return autoprefixer(style);}},created() {this.$parent && this.$parent.updateItems();},destroyed() {this.$parent && this.$parent.updateItems();}};
</script>
<style lang="scss" scoped>.el-carousel__item--card {width: 28%;}.el-carousel__arrow--left {left: 15px;}.el-carousel__arrow--right {right: 15px;}.el-carousel__item {cursor: pointer;z-index: 1;}.el-carousel__item--card.is-in-stage {z-index: 2;.el-carousel__mask{display: none;}}.el-carousel__item--card.is-active {z-index: 3;}.specialIndex{z-index: 0}
</style>
参考:
https://blog.csdn.net/yu17310133443/article/details/106278680
https://blog.csdn.net/weixin_58860430/article/details/126781582
