vue滑块验证登录

滑块样式

<template>
  <div>
    <el-form :model="form" ref="form" :rules="codeRules">
      <el-form-item prop="phone">
        <el-input type="tel" :maxlength="11" v-model.trim="form.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="checkMove">
        <div class="movebox">
          <div class="movego"></div>
          <div class="txt" id="txt">按住滑块,拖动到最右边</div>
          <div class="move moveBefore" v-move="pull"></div> <!-- v-move 为自定义指令 -->
        </div>
      </el-form-item>
      <el-form-item prop="smsCode">
        <el-input placeholder="请输入验证码" v-model.trim="form.smsCode" autocomplete="off"></el-input>
        <el-button @click="sendCode('form')" :disabled="!show">
          <span v-show="show">获取短信验证码</span>
          <span v-show="!show">已发送 {{count}}s</span>
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="codeLogin('form')">登 录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      count: 60,
      form: {
        phone: "",
        smsCode: "",
        checkMove: "",
      },
      codeRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        smsCode: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }],
        checkMove: [{ required: true, message: '滑动完成验证', trigger: 'blur' }],
      },
    }
  },
  directives: {
    move(el, binding, vnode) {
      el.onmousedown = function (e) {
        var X = e.clientX - el.offsetLeft;
        document.onmousemove = function (e) {
          var endx = e.clientX - X;
          el.className = "move moveBefore";
          el.style.left = endx + "px";
          var width = document.querySelector(".movebox").offsetWidth - document.querySelector(".move").offsetWidth;
          el.parentNode.children[0].style.width = endx + "px";
          el.parentNode.children[1].innerHTML = "按住滑块,拖动到最右边";

          //临界值小于
          if (endx <= 0) {
            el.style.left = 0 + "px";
            el.parentNode.children[0].style.width = 0 + "px";
          }

          //临界值大于
          if (parseInt(el.style.left) >= width) {
            el.style.left = width + "px";
            el.parentNode.children[0].style.width = width + "px";
            el.parentNode.children[1].innerHTML = "<span style='color:#fff'>验证通过</span>";
            el.className = "move moveSuccess";
            document.onmousemove = null;
            el.onmousedown = null;

            binding.value()
          }
        };
      };
      document.onmouseup = function () {
        document.onmousemove = null;
      };
    }
  },
  methods: {
    pull() {
      this.form.checkMove = true;
    },
    //发送短信验证码
    sendCode(formName) {
      console.log(this.form.checkMove, 11)
      if (!this.form.phone) {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        });
        return;
      }
      if (!this.form.checkMove) {
        this.$message({
          message: '滑块验证有误，请重新验证',
          type: 'warning'
        });
        return;
      }

      let params = {
        // ...
      }
      //发送短信验证码接口
      sendVerificationCode({ data: params }).then(res => {
        if (res.code === 0) {
          this.show = false;
          let timeId = setInterval(() => {
            if (this.count <= 0) {
              this.show = true;
              clearInterval(timeId);
              this.count = 60;
            } else {
              this.count--;
            }
          }, 1000)
        } else {
          this.$message.error(res.message);
        }
      })

    },

    codeLogin() { }
  }
}
</script>

<style lang="less" scoped>
.movebox {
  position: relative;
  background-color: #e8e8e8;
  width: 359px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-top: 21px;
  .txt {
    position: absolute;
    top: 0px;
    width: 359px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    font-size: 12px;
    color: #999;
  }
  .movego {
    background-color: #22ac38;
    height: 40px;
    width: 0px;
  }
  .move {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 62px;
    height: 40px;
    border: 1px solid #ccc;
    cursor: move;
    border-radius: 4px;
    background: #fff;
  }
  .moveBefore {
    background: #fff url("../../assets/images/qj.png") no-repeat center;
  }
  .moveSuccess {
    background: #fff url("../../assets/images/yzcg.png") no-repeat center;
  }
}
</style>