vue实现移动滑块验证

这篇文章主要为大家详细介绍了vue实现移动滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• JS实现拖动滑块验证
• JavaScript实现滑块验证案例
• JavaScript实现滑块验证码
• javascript实现的元素拖动函数宿主为浏览器
• jquery对元素拖动排序示例
• 自定义range sliders滑块实现元素拖动方法