elementui轮播图宽度修改（个人笔记非教程）

需要获取到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>