ElCarousel 动态走马灯

let resizeObserver = null
const containerRef = ref(null)
const containerWidth = ref(0)

// 根据容器宽度计算每页数量
const itemsPerPage = computed(() => {
    const w = containerWidth.value
    console.log(w)
    if (w >= 930) return 4   // 每个卡片约 220px * 4 + 间距
    if (w >= 720) return 3   // 220 * 3
    if (w >= 480) return 2   // 220 * 2
    return 1
})


const groupedItems = computed(() => {
    const perPage = itemsPerPage.value
    const groups = []
    for (let i = 0; i < timelineItems.length; i += perPage) {
        groups.push(timelineItems.slice(i, i + perPage))
    }
    console.log(groups);
    return groups
})

// 计算每个卡片的宽度百分比
const cardWidth = computed(() => {
    const perPage = itemsPerPage.value
    return `${(100 / perPage).toFixed(4)}%` // 如 "25.0000%", "33.3333%"
})


onMounted(() => {
    if (!containerRef.value) return
    nextTick(() => {
        // 创建 ResizeObserver 监听容器宽度
        resizeObserver = new ResizeObserver((entries) => {
            for (let entry of entries) {
                // 获取 content box 宽度（不含 border/padding）
                containerWidth.value = Math.floor(entry.contentRect.width)
            }
        })

        resizeObserver.observe(containerRef.value)
    })
})

onBeforeUnmount(() => {
    if (resizeObserver) {
        resizeObserver.disconnect()
    }
})


<div ref="containerRef" class="max-w-[930px] mx-auto">
    <ElCarousel height="112px" :autoplay="false" indicator-position="none" :arrow="groupedItems.length <= 1 ? 'never' : 'hover'">
        <ElCarouselItem v-for="(i, k) of groupedItems" :key="k">
            <div class="shortcut max-w-[940px] flex flex-start mb-5 mx-[-5px]">
                <div
                    v-for="(item, index) in i"
                    :key="index"
                    class="item mx-[5px] min-w-[190px]"
                    @click="item.action && item.action()"
                    :class="{ 'cursor-pointer': item.action }"
                    :style="{ width: cardWidth }"
                >
                    <div class="flex justify-between mb-2">
                        <div class="date">{{ item.date }}</div>
                        <div class="subTitle">{{ item.title }}</div>
                    </div>
                    <Ellipsis :lines="2" :line-height="22" class="relative z-10">
                        <span class="text-[14px]">{{ item.description }}</span>
                    </Ellipsis>
                </div>
            </div>
        </ElCarouselItem>
    </ElCarousel>
</div>




.shortcut{
  .item{
    width: 220px;
    height: 112px;
    padding: 16px 20px;
    border-radius: 20px;
    border-width: 1px;
    background: #FFFFFF;
    cursor: pointer;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url(../../assets/haisum/home/shortcut-bg.png) center center no-repeat;
      background-size: cover;
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 20px;
    }

    &:hover::before {
      opacity: 1;
    }
    .subTitle{
      height: 30px;
      padding: 4px 6px;
      gap: 4px;
      border-radius: 6px;
      font-size: 14px;
      color: #303133;
      background: #F0F2F5;
      font-weight: 500;
    }
    .date{
      color: #606266;
      font-weight: 500;
      font-size: 12px;
      line-height: 30px;
      padding-left: 20px;
      background: url(../../assets/haisum/home/vector.svg) left center no-repeat;
    }
  }
}