需要获取到elementUI的carouselItem源码,然后修改
calcCardTranslate(index, activeIndex) {
const parentWidth = this.$parent.$el.offsetWidth
this.parentWidth = parentWidth
if (index === activeIndex) {
return 'calc(50vw - 539px)' //根据实际情况调整
}
if (this.inStage) {
return (
(parentWidth *
((2 - CARD_SCALE) * (index - activeIndex) + 1)) /
4
)
} else if (index < activeIndex) {
return (-(1 + CARD_SCALE) * parentWidth) / 4
} else {
return ((3 + CARD_SCALE) * parentWidth) / 4
}
},
itemStyle() {
const translateType =
this.parentDirection === 'vertical'
? 'translateY'
: 'translateX'
const translate =
this.translate === 'calc(50vw - 539px)'
? this.translate
: this.translate + 'px'
const value = `${translateType}(${translate}) scale(${this.scale})`
const style = {
transform: value,
}
return style
},
完整代码:
<template>
<div
v-show="ready"
class="el-carousel__item"
:class="{
'is-active': active,
'el-carousel__item--card': $parent.type === 'card',
'is-in-stage': inStage,
'is-hover': hover,
'is-animating': animating,
}"
@click="handleItemClick"
:style="itemStyle"
>
<div
v-if="$ === '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,
animating: false,
parentWidth: '0',
}
},
methods: {
processIndex(index, activeIndex, length) {
if (activeIndex === 0 && index === length - 1) {
return -1
} else if (activeIndex === length - 1 && index === 0) {
return length
} else if (
index < activeIndex - 1 &&
activeIndex - index >= length / 2
) {
return length + 1
} else if (
index > activeIndex + 1 &&
index - activeIndex >= length / 2
) {
return -2
}
return index
},
calcCardTranslate(index, activeIndex) {
const parentWidth = this.$parent.$el.offsetWidth
this.parentWidth = parentWidth
if (index === activeIndex) {
return 'calc(50vw - 539px)'
}
if (this.inStage) {
return (
(parentWidth *
((2 - CARD_SCALE) * (index - activeIndex) + 1)) /
4
)
} else if (index < activeIndex) {
return (-(1 + CARD_SCALE) * parentWidth) / 4
} else {
return ((3 + CARD_SCALE) * parentWidth) / 4
}
},
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
}
if (index !== activeIndex && length > 2 && this.$parent.loop) {
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 - activeIndex)) <= 1
this.active = index === activeIndex
this.translate = this.calcCardTranslate(index, activeIndex)
this.scale = this.active ? 1 : CARD_SCALE
} else {
this.active = index === activeIndex
const isVertical = parentDirection === 'vertical'
this.translate = this.calcTranslate(
index,
activeIndex,
isVertical
)
this.scale = 1
}
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 translate =
this.translate === 'calc(50vw - 539px)'
? this.translate
: this.translate + 'px'
const value = `${translateType}(${translate}) scale(${this.scale})`
const style = {
transform: value,
}
return style
},
},
}
</script>
<style lang="scss">
.el-carousel__item {
width: 1060px !important;
&.is-active {
}
}
</style>