vue实现移动滑块验证 vue实现移动滑块验证

【vue实现移动滑块验证】本文实例为大家分享了vue实现移动滑块验证的具体代码，供大家参考，具体内容如下
记录一下今天的学习内容

文章图片

文章图片

{{!validation? textStart : textEnd}}

.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 = () => {// 如果鼠标抬起后拖拽距离没到可移动距离最大值将返回起点0if (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}; },

最后写一点今天学到的知识点