elelement-plus的Carousel 走马灯鼠标滑动

<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>