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张的子组件代码：
注：左右最下面两张是做的背景图可以忽略，实际就5显示了张卡片
<template>
<div
v-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">
<div
v-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>
<div
v-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">
<div
v-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
