用vuejs实现滑动解锁功能(简单版

用vue实现滑动解锁功能

功能说明

滑块从左滑动到右,即可解锁

功能拆解

1. 页面布局开发 ✅
2. 锁定滑块dom ✅
3. 监听滑块鼠标点击事件(即滑动开始 ✅
4. 监听滑块鼠标松开事件(即滑动结束 ✅
5. 滑块鼠标点击和松开事件中的滑动距离 ✅
6. 根据滑动距离修改滑块所在的位置 ✅
7. 监听鼠标动作 做到实时修改滑块位置 让动作看起来更连贯 ✅
8. 对滑块滑动的样式增加动画效果
9. 规定滑块滑动区域 限制规定区域内允许滑动,超过区域则滑块恢复原位
10. 滑动成功解锁功能动画特效

代码拆解

• 其实滑动,我们只需要用到3个方法:鼠标点击,鼠标点击抬起,鼠标滑动.所以只对这三个方法做处理即可.

• 鼠标点击的时候,我们需要记录此时鼠标是点击的状态.也要判断,如果滑块已经滑到了结尾,则不该再次滑动

• 鼠标抬起的时候,我们只需要记录此时鼠标抬起的状态即可.

• 鼠标滑动的时候,我们的目的是滑块跟随鼠标的移动而移动.就需要在鼠标移动的时候,多次修改滑块的位置.当滑块到达了设置长度终点,改变滑块的颜色,标志着滑动结束.

//鼠标点击
mouseDown(e) {
	if (e.clientX > this.maxLength) {//如果滑块已经超过了父dom设置的最大宽度,则不做处理
		return false
	}
	this.isDraw = true;//记录此时是否是鼠标点击的状态
},
//鼠标抬起
mouseUp(e) {
	this.isDraw = false; //记录此时是否是鼠标抬起的状态
},
//鼠标滑动
onmousemove(event) {
	if (this.isDraw) {//如果是鼠标正在点击的状态
		let clientX = event.clientX;//获取当前的横坐标
		document.getElementById("draw-icon").setAttribute('style', `left:${clientX-50}`);//更新滑块位置
		if (clientX >= this.maxLength) {//如果达到滑块的终点了
			this.isDraw = false;//修改状态为鼠标已经抬起
			let style = `background-color:pink;left:${clientX-50};`
			document.getElementById("draw-icon").setAttribute('style', style);//更新滑块位置,将颜色改变
			return false;
		}
	}
}

完整代码

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="main" @mousemove="onmousemove">
	<div id="cont" class="cont">
		<div id="draw-bg" class="draw-bg">
			<div id="draw-icon" class="draw-icon" @mousedown="mouseDown" @mouseup="mouseUp">
			</div>
		</div>
	</div>
</div>
<script>
	var vm = new Vue({
		el: "#main",
		name: "",
		components: {},
		props: {},
		data() {
			return {
				maxLength: 500, //最大滑动距离
				isDraw: false, //是否在滑动
			}
		},
		created() {},
		watch: {},
		methods: {
			mouseDown(e) {
				if (e.clientX > this.maxLength) {
					return false
				}
				this.isDraw = true;
			},
			mouseUp(e) {
				this.isDraw = false;
			},
			onmousemove(event) {
				if (this.isDraw) {
					let clientX = event.clientX;
					document.getElementById("draw-icon").setAttribute('style', `left:${clientX-50}`);
					if (clientX >= this.maxLength) {
						this.isDraw = false;
						let style = `background-color:pink;left:${clientX-50};`
						document.getElementById("draw-icon").setAttribute('style', style);
						return false;
					}
				}

			}
		},
	})

	//reload();
</script>
<style>
	#main {
		background-color: aliceblue;
		width: 100%;
		height: 100%;
	}

	.cont {}

	.draw-bg {
		background-color: aquamarine;
		min-width: 500px;
	}

	.draw-icon {
		width: 100px;
		height: 50px;
		background-color: cornflowerblue;
		position: absolute;
		left: 0;
	}
</style>