Vue3 el-carousel 卡片模式 el-carousel-item卡片间距

模版部分

在模版中给 每个卡片添加一个独有id, 以及@change="carouselChange" ref="carousel"

<template>
  <div class="FriendsAround">
    <div class="FriendsAround-title">您的朋友们都在用</div>

    <div class="FriendsAround-box">

      <el-carousel :initial-index="1" :autoplay="false" :cardScale="0.9" :indicator-position="none" type="card"
        @change="carouselChange" ref="carousel">

        <el-carousel-item v-for="(item, index) in FriendsAroundList" :key="index" :id="item.id">

          <div class="FriendsAround-item">
            <div class="item-avatar">
              <el-image :src="item.avatar" fit="cover" class="avatar" />
              <div class="avatar-txt">
                <span class="name">{{ item.name }}</span>
                <span class="introduce">{{ item.introduce }}</span>
              </div>
            </div>
            <div class="item-line"></div>
            <div class="item-message">
              {{ item.message }}
            </div>
          </div>

        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

JavaScript 部分

setPY 函数还可优化，数据如果比较多，可以通过计算得出当前id ,前一个的id, 后一个的id值，然后其他部分都为0，主要就是找到当前id的和它的前后两个id值。

然后通过querySelector选择唯一id属性值，给他们添加间隔。

目前找到这个方法，这个走马灯组件的卡片模式，他们的位置变换都是通过行内样式transform属性改变的，你也可以研究动态改变transform属性的translateX（）的值。

<script lang="ts" setup>
import { FriendsAroundList } from '../constants'
import { onMounted, ref } from 'vue'
// 走马灯元素
const carousel = ref(null)

// 当前数据
const carouseId = ref(1);

/**
 * 切换
 * @param current 
 * @param prev 
 */
const carouselChange = (current: number, prev: number) => {
  carouseId.value = current;
  setPY();
}

/**
 * 设置PY
 */
const setPY = () => {
  const currentId = carouseId.value;

  const currentPrevCent = '2%';
  const currentCent = '7%';
  const currentNextCent = '12%';
  const nothingCent = '0%';

  if (currentId === 0) {
    setCarouselItemStyle(0, currentCent);
    setCarouselItemStyle(1, currentNextCent);
    setCarouselItemStyle(2, nothingCent);
  } else if (currentId === 1) {
    setCarouselItemStyle(0, currentPrevCent);
    setCarouselItemStyle(1, currentCent);
    setCarouselItemStyle(2, currentNextCent);
  } else if (currentId === 2) {
    setCarouselItemStyle(0, currentNextCent);
    setCarouselItemStyle(1, currentPrevCent);
    setCarouselItemStyle(2, currentCent);
  }

};

/**
 * 设置轮播图子项样式
 * @param itemId 子项id
 * @param leftValue 左边距
 */
const setCarouselItemStyle = (itemId: number, leftValue: string) => {
  const item = carousel.value?.$el.querySelector(`[id="${itemId}"]`) as HTMLElement;
  if (item) {
    item.style.left = leftValue;
  }
};

// 生命周期钩子
onMounted(() => {
  setPY();
});
</script>

样式部分

这是主要框架样式

<style lang="scss" scoped>

.FriendsAround-box {
    display: flex;
    justify-content: center;
    width: 111.11rem;
    margin: auto;

    .FriendsAround-item {
      margin-right: 2.3rem;
      padding: 3.33rem 2.22rem 0 2.22rem;
      border-radius: 1rem;
      width: 35.19rem;
      height: 29.63rem;
      background: #fff;

    }
  }

// 穿透

:deep(.el-carousel--horizontal) {
  width: 105rem;
  height: 30.63rem;
  padding: 0 2rem;
}

:deep(.el-carousel__container) {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

:deep(.el-carousel__item) {
  margin-right: 2.3rem;
}

:deep(.el-carousel__item--card) {
  width: 35.19rem;
  height: 29.63rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0px 1.8519rem 0px #dfdfdf;

}

:deep(.el-carousel__arrow) {
  z-index: -1;
}
</style>