vue + element 实现鼠标左右滑动效果

我用了element中的走马灯＋overflow-x: auto;

html （复制后格式化一下）

					
						
							
								
									

									    {{item}}
									
								
							
						
					
				




.scroll {
				width: 100%;
				user-select: none;
				overflow-x: auto;
				white-space: nowrap;
			}

js

mounted() {
	this.entrance = document.querySelector('#entrance')
},

methods：{
    // 左右滑动触发的切换
    prev() {
		this.$refs.entrance.prev();
	},
	next() {
		this.$refs.entrance.next();
	},
	slide(i) {
		var flag;
		var downX;
		i.addEventListener("mousedown", function (event) {
			flag = true;
            // 获取到点击的x下标
			downX = event.clientX;
		});
		var that = this;
		i.addEventListener("mousemove", function (event) {
			if (flag) {
                // 判断是否是鼠标按下滚动元素区域
        	    // 获取移动的x轴
				var moveX = event.clientX;
                // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
                // 我这里就是根据这个值去判断是否切换的
				var scrollX = moveX - downX;
				// 左滑
				if (scrollX < 0) {
					if (scrollX < -150) {
                        // 调用切换的方法
						that.next()
                        // 切换完后 取消事件
						flag = false;
					}
				}
				if (scrollX > 0) {
					if (scrollX > 150) {
						that.prev(type)
						flag = false;
					}
				}
			}
		});
		// 鼠标抬起停止拖动
		i.addEventListener("mouseup", function () {
			flag = false;
		});
		// 鼠标离开元素停止拖动
		i.addEventListener("mouseleave", function (event) {
			flag = false;
		});
	},
}，
watch: {
	entrance(n) {
        // 监听 然后调用切换的方法
		this.slide(n)
	},
},

this.$refs.entrance.setActiveItem(index);

手动切换当前展示的索引