本文实例为大家分享了vue实现移动滑块验证的具体代码,供大家参考,具体内容如下
记录一下今天的学习内容
<div class="solidBox" :class="{'solidBox1': validation}">
<div @mousedown="solidStar" class="solid" :class="{'solid1': validation}"></div>
{{!validation? textStart : textEnd}}
</div>
.solidBox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
width: 100%;
height: 35px;
background-color: #999999;
.solid {
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
cursor: pointer;
border: 1px solid #666666;
background: url("/img/切图2/arrow2.png") center no-repeat;
background-color: #ffffff;
box-sizing: border-box;
}
.solid1 {
background: url("/img/切图2/ok.png") center no-repeat;
background-size: 100%;
border: 1px solid #358097;
}
}
.solidBox1 {
color: #ffffff;
background-color: #1aad19;
}
方法写在methods里面
//鼠标按下时
solidStar(e) {
// console.log(e);
// 获取当前DOM元素宽度 鼠标当前点击位置
let solidDom = e.target;
let moveStart = e.clientX;
let solidDomWith = solidDom.offsetWidth;
// 父节点减去滑块宽度获取滑块最大移动距离
let MaxW = e.path[1].clientWidth - solidDomWith;
// 设置判断条件 防止验证成功后鼠标移动方法继续被调用
if (this.validation === true) {
return false;
}
// 鼠标移动
(document.onmousemove = e => {
// 获取移动时鼠标距离浏览器左上角到当前位置的X轴距离
let endX = e.clientX;
// 从上面获取到的数据计算出鼠标移动的距离
this.moveX = endX - moveStart;
// 判断如果用户反方向移动将移动距离赋值为零
if (this.moveX <= 0) {
this.moveX = 0;
}
// 判断如果滑块移动距离大于最大宽度 给其赋值最大宽度
if (this.moveX >= MaxW) {
this.moveX = MaxW;
}
// 为了更好地体验 写上动画 要不都不写 不然其他动画会覆盖向右拖拽动作
solidDom.style.transition = "0s all";
solidDom.style.left = this.moveX + "px";
// 很关键的地方 e.preventDefault()这个方法会关闭与当前事件关联的其他动作 只执行此事件
e.preventDefault();
}),
// 鼠标抬起
(document.onmouseup = () => {
// 如果鼠标抬起后拖拽距离没到可移动距离最大值将返回起点0
if (this.moveX !== MaxW) {
solidDom.style.transition = ".5s linear";
solidDom.style.left = 0;
} else {
// 如果成功设置判断条件
this.validation = true;
}
// 动作完成后将事件清空
document.onmousemove = null;
document.onmouseup = null;
});
}
export default {
name: "twologin",
data() {
return {
loginBoxShow: true,
isActive: 0,
userName: "",
psd: "",
input1: "",
input2: "",
select: "",
validation: false,
textStart: "向右拖动滑块",
textEnd: "验证成功",
moveX: 0
};
},
最后写一点今天学到的知识点
- event.screenX是屏幕左上角到鼠标当前位置的x轴距离
- event.clientX是浏览器左上角到鼠标当前位置的x轴距离
- event.offsetX是鼠标当前点击控件左上角到鼠标当前位置的x轴距离
- evevt.preventDefault()
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。