盒子的背景颜色跟着轮播图片颜色变化

结构：

例如上方一个盒子，下面有一个轮播图，里面的轮播图使用了element-ui

 <div class="bgbox" :style="bgStyle"></div>
 <div class="block">
   <el-carousel trigger="click" @change="handleChange">
     <el-carousel-item v-for="item in swiperData" :key="item.id">
        <img :src="item.url" alt="" />
      </el-carousel-item>
    </el-carousel>
 </div>

在data中存放数据

data() {
    //这里存放数据
    return {
      bgStyle: { background: "#bfe1fe" },
      bgArr: [
        { background: "#bfe1fe" },
        { background: "rgb(60, 129, 255)" },
        {
          background: "#070b13",
        },
        {
          background: "#7d756f",
        },
      ],
      swiperData: [
        {
          id: 1,
          url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b6f6c0c0eb8ede475c8858bc1370cfe9.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
        },
        {
          id: 2,
          url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3c18bf93bc1b211e4ebc6bca4a67f57b.jpg?w=2452&h=920",
        },
        {
          id: 3,
          url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/36b45c624f42fa81732457e3f9773dbd.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
        },
        {
          id: 4,
          url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4cfa4e9a0f10a79ed068f26adf846bfa.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
        },
      ],
    };
  },

给上方的盒子动态绑定一个style，默认为bgstyle，在methods里定义监听方法

methods: {
    handleChange(index) {
      this.bgStyle = this.bgArr[index];
    },
  },

根据index来动态改变背景颜色

总结：给轮播图一个监听事件，通过bgArr的index来动态改变背景颜色