<template>
<div>
<el-carousel height="350px" ref="carousel" :autoplay="autoplay">
<el-carousel-item v-for="item in 4" :key="item" @mousedown="mousedown" :style="autoplay?'':'transition: none;'" class="p-20">
<img src="../assets/images/swiper1.png" style="user-select: none;" draggable="false"> <!-- draggable=false为图片不能拖动 -->
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
data() {
return {
autoplay: true,//是否自动播放(同时可以表示为是否为不按下鼠标)
countX: 0,
};
},
mounted() {
//添加全局的鼠标滑动鼠标左键抬起
document.addEventListener("mouseup", this.mouseup)
document.addEventListener("mousemove", this.mousemove)
},
methods: {
mousedown() {
//鼠标按下时暂停自动轮播,同时清除移动距离
this.autoplay = false
this.countX = 0
},
mousemove(e) {
//判断是不是鼠标按下状态
if (this.autoplay) return
if (this.autoplay) return
//获取全部的轮播图子项
let list = document.querySelectorAll(".el-carousel__item")
this.countX += e.movementX
for (let i = 0; i < list.length; i++) {
//使每一项偏离鼠标移动的距离
list[i].style.transform =
`translateX(${parseInt(list[i].style.transform.replace('translateX(',""))+e.movementX}px) scale(1)`
}
},
mouseup() {
//判断是不是鼠标按下状态
if (this.autoplay) return
this.autoplay = true
//如果向右边移动超过100就切换上一张
if (this.countX >= 100) {
this.$refs.carousel.prev()
} else if (this.countX <= -100) { //如果向左边移动超过100就切换下一张
this.$refs.carousel.next()
} else {
//否则回到当前
this.$refs.carousel.prev()
this.$refs.carousel.next()
}
},
}
};
</script>
elelement-plus的Carousel 走马灯鼠标滑动
最新推荐文章于 2024-07-08 15:22:23 发布