Element轮播图组件切换太单调？手把手带你重写切换效果

前言：

最近在逛山东博物馆网站的时候，发现该网站主页淡入淡出的轮播图非常的优雅，所以就想来复刻一下，也算是对组件进行了二次的封装和修改

工具准备：

Vue3+Element Plus走马灯组件

注意事项：

Element Plus的走马灯有以下几个属性需要注意下：

.el-carousel__item 所有轮播图元素的样式。

. is-active 样式来确定当前展示的元素 。

.is-animating 演示来实现过渡的间隔。

还有一个行内样式，组件内部是通过添加或修改行内样式实现切换的效果（这个比较重要）。

案例代码

HTML

<template>
    <div class="home-container">
        <div class="home-container_banner">
            <el-carousel height="100vh" @change="change" :interval="3000" :pause-on-hover="false">
                <el-carousel-item v-for=" item in bannerList" :key="item">
                    <div class="container-pic" :style="{ backgroundImage: `url(${getImage(item)})` }"></div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

JavaScript

背景图片需要用绝对路径，所以封装一个小的方法

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
const getImage = (imgUrl) => {
  return new URL(`../image/${imgUrl}`, import.meta.url).href
}


// 组件名称定义
defineOptions({
    name: 'MuseumDash'
});

// 轮播图图片列表
const bannerList = ref(['1.jpg', '2.jpg', '3.jpg', '4.jpg']);

// 幻灯片切换后的样式更改
const change = () => {
    nextTick(() => {
        const picItems = document.querySelectorAll('.el-carousel__item');
        picItems.forEach(item => {
            item.style.transform = 'scale(1)';
        });
        setTimeout(() => {
            const isActive = document.querySelector('.el-carousel__item.is-active');
            if (isActive) {
                isActive.style.transform = 'scale(1.08)';
            }
        }, 10);
    });
};
change()
// 使用 MutationObserver 监控并覆盖 translate 样式
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            mutation.target.style.transform = mutation.target.style.transform.replace(/translateX\([^)]*\)/, '');
        }
    });
});

// 监听页面加载和卸载事件
onMounted(() => {
    const items = document.querySelectorAll('.el-carousel__item');
    items.forEach(item => {
        observer.observe(item, {
            attributes: true,
            attributeFilter: ['style']
        });
    });
});

onBeforeUnmount(() => {
    observer.disconnect();
});
</script>

Css

<style lang="scss" scoped>
.home-container_banner {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;

    .container-pic {
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.el-carousel__item {
    transition: opacity 0.5s linear, transform 2s ease-in-out !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 1;
}

.el-carousel__item.is-active {
    opacity: 1;
    z-index: 2;
}
</style>

解析：

1. 修改 .el-carousel__item 样式，让元素本身实现放大的效果。这里使用 !important 进行加权，防止组件内部的样式文件对其进行覆盖。

2. 通过 JS 控制覆盖掉组件自身逻辑添加的style（覆盖样式是实现功能重要的点之一），使用 nextTick 是为了保证先获取元素再进行逻辑执行，这里使用 setTimeout 是为了延迟执行放大效果，如果不使用的话，当页面刷新时幻灯片的第一个页面直接就会被放大，就没有逐渐放大的效果了。整体的逻辑是在 组件切换的时候执行的，为了让页面创建时就开始执行，要在 created 周期中执行一次，让第一张幻灯片实现动效。

   const change = () => {
       nextTick(() => {
           const picItems = document.querySelectorAll('.el-carousel__item');
           picItems.forEach(item => {
               item.style.transform = 'scale(1)';
           });
           setTimeout(() => {
               const isActive = document.querySelector('.el-carousel__item.is-active');
               if (isActive) {
                   isActive.style.transform = 'scale(1.08)';
               }
           }, 10);
       });
   };
   change()
   

3. 通过 MutationObserver 监听 Dom 添加元素或属性事件，解决更改视口大小动效错乱的问题。因为 Element 组件会根据视口位置自动计算当前位置，计算完毕后会添加上 style 属性那么就会将我们修改后的 style 属性进行覆盖。（重要的优化逻辑）（这个方法不是很常用，大家可以去 MDN 查看对应的 Api）

   const observer = new MutationObserver(mutations => {
       mutations.forEach(mutation => {
           if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
               mutation.target.style.transform = mutation.target.style.transform.replace(/translateX\([^)]*\)/, '');
           }
       });
   });
   
   // 监听页面加载和卸载事件
   onMounted(() => {
       const items = document.querySelectorAll('.el-carousel__item');
       items.forEach(item => {
           observer.observe(item, {
               attributes: true,
               attributeFilter: ['style']
           });
       });
   });
   
   onBeforeUnmount(() => {
       observer.disconnect();
   });
   

4. 在组件销毁前清除监听，防止内存泄漏