本文实例为大家分享了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()
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。