vue3+element-plus实现走马灯拖拽、路由跳转

<template>
    <!-- 
    mousedown 事件在鼠标按下某个按键时触发，比如按下左键或右键。
    mousemove 事件在鼠标移动时触发，可以用来监听鼠标的位置变化。
    mouseup 事件在鼠标松开某个按键时触发。
    -->
    <div class="business-support">
        <div class="carousel-three-columns" @mousedown="startDrag" @mousemove="onDragging" @mouseup="stopDrag">
            <el-carousel ref="carousel" :interval="3000" arrow="never" indicator-position="outside">
                <el-carousel-item v-for="(group, index) in groupedImages" :key="index">
                    <div class="carousel-group">
                        <el-card class="carousel-card" v-for="image in group" :key="image.src"
                            @click="trackClick($event, image)">
                            <img :src="image.src" class="carousel-image" />
                            <div class="card-name">{{ image.title }}</div>
                        </el-card>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const images = [
    {
        src: require('@/assets/icon/5def614cb8427.png'),
        title: '设备',
        description: '',
        route: '/equipment'
    },
    {
        src: require('@/assets/icon/5def614cb8427.png'),
        title: '维保',
        description: '',
        route: '/maintenance'
    },
    {
        src: require('@/assets/icon/5def60fdd7828.png'),
        title: '信息',
        description: '',
        route: '/information'
    },
    {
        src: require('@/assets/icon/5def60fdd7828.png'),
        title: '设置',
        description: '',
        route: '/settings'
    },
    {
        src: require('@/assets/icon/5def60fdd7828.png'),
        title: '资源下载',
        description: '',
        route: '/resource-download'
    }
];

const groupedImages = ref([]);

// 用于将给定的图片数组 images 按照 itemsPerGroup 的数量进行分组。
// 每个分组将包含 itemsPerGroup 个图片对象。通过迭代图片数组，使用 slice 方法来切割数组，并将切割后的小数组添加到 groups 数组中。
const groupImages = (images, itemsPerGroup) => {
    const groups = [];
    for (let i = 0; i < images.length; i += itemsPerGroup) {
        groups.push(images.slice(i, i + itemsPerGroup));
    }
    return groups;
};

groupedImages.value = groupImages(images, 3);

let startTime = 0;
let startPosition = { x: 0, y: 0 };
const trackClick = (event, image) => {
    const endTime = Date.now();
    const endPosition = { x: event.clientX, y: event.clientY };
    // 时间小于200毫秒，且水平和垂直方向的移动距离都小于10像素时，判断为一个有效的点击操作。
    if (endTime - startTime < 200 && Math.abs(endPosition.x - startPosition.x) < 10 && Math.abs(endPosition.y - startPosition.y) < 10) {
        // 路由跳转
        router.push(image.route);
    }
};

// --------------------------------------------------------- 走马灯-鼠标点击滑动 START ---------------------------------------------------------

// 定义引用
const carousel = ref(null);
// 是否在拖拽
let isDragging = false;
// 记录鼠标开始拖拽时的位置
let startX = 0;

// 拖拽事件开始
const startDrag = (event) => {
    // 鼠标按下时触发
    isDragging = true;
    // 记录当前鼠标位置
    startX = event.clientX;
    startTime = Date.now();
    startPosition = { x: event.clientX, y: event.clientY };
};

// 拖拽过程事件
const onDragging = (event) => {
    // 鼠标移动时触发发，检查是否正在拖拽中 (isDragging 为 true)，以及 carousel.value 是否存在
    if (!isDragging || !carousel.value) return;
    // 计算鼠标移动的水平位移 deltaX = event.clientX - startX
    const deltaX = event.clientX - startX;

    // 如果 deltaX 大于 50，则调用 carousel.value.prev()，执行轮播的上一个项目操作，并将 isDragging 设为 false。
    // 如果 deltaX 小于 -50，则调用 carousel.value.next()，执行轮播的下一个项目操作，并将 isDragging 设为 false。
    if (deltaX > 50) {
        carousel.value.prev();
        isDragging = false;
    } else if (deltaX < -50) {
        carousel.value.next();
        isDragging = false;
    }
};

// 当鼠标抬起时触发，将 isDragging 设为 false，结束拖拽状态。
const stopDrag = () => {
    isDragging = false;
};
// --------------------------------------------------------- 走马灯-鼠标点击滑动 END   ---------------------------------------------------------

const openLoading = () => {
    console.log("---------------");
};

onMounted(() => {
    openLoading();
});
</script>

<style scoped>

img {
    -webkit-user-drag: none;
}

.carousel-three-columns {
    width: 50%;
    margin: 93px auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.carousel-group {
    display: flex;
}

.card-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 24px;
}

.carousel-card {
    flex: 1;
    max-width: 200px;
    height: 200px;
    padding: 10px;
    margin: auto;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.carousel-card:hover {
    color: #409EFF;
}

/* 使用深度作用选择器来修改指示器的颜色和高度 */
::v-deep .el-carousel__button {
    background-color: black;
}

::v-deep .el-carousel__container {
    height: 200px;
}

.carousel-card img {
    /* 添加变换过渡效果 */
    transition: transform 0.3s ease;
}

.carousel-card img:hover {
    /* 鼠标悬浮时放大图片 */
    transform: scale(1.05);
}
</style>