Vue实现滑动登录（Java Web项目）

Vue实现滑动登录（Java Web项目）

1.Vue中Template部分

代码如下：

<div class="login-btn">
   <div class="jc-component__range">
      <div class="jc-range" :class="rangeStatus ? 'success' :'' ">
      <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
      <span style="color:white;">{{rangeStatus?successText:startText}}</span>
      </div>
   </div>
 </div>

2.Vue中Script部分

代码如下：

props: {
      // 成功之后的函数
      successFun: {
        type: Function
      },
      //成功图标
      successIcon: {
        type: String,
        default: 'el-icon-success'
      },
      //成功文字
      successText: {
        type: String,
        default: '验证成功'
      },
      //开始的图标
      startIcon: {
        type: String,
        default: 'el-icon-d-arrow-right'
      },
      //开始的文字
      startText: {
        type: String,
        default: '登录'
      },
      //失败之后的函数
      errorFun: {
        type: Function
      },
      //或者用值来进行监听
      status: {
        type: String
      }
    },

data() {
      return {
        rangeStatus: ''
      };
    }

	  // 滑动登录函数
      rangeMove(e) {
        let ele = e.target;
        let startX = e.clientX;
        let eleWidth = ele.offsetWidth;
        let parentWidth = ele.parentElement.offsetWidth;
        let MaxX = parentWidth - eleWidth;
        if (this.rangeStatus) {//不运行
          return false;
        }
        document.onmousemove = (e) => {
          let endX = e.clientX;
          this.disX = endX - startX;
          if (this.disX <= 0) {
            this.disX = 0;
          }
          if (this.disX >= MaxX - eleWidth) {//减去滑块的宽度,体验效果更好
            this.disX = MaxX;
          }
          ele.style.transition = '.1s all';
          ele.style.transform = 'translateX(' + this.disX + 'px)';
          e.preventDefault();
        };
        document.onmouseup = () => {
          if (this.disX !== MaxX) {
            ele.style.transition = '.5s all';
            ele.style.transform = 'translateX(0)';
            //执行失败的函数
            this.errorFun && this.errorFun();
          } else {
            if (this.form.name.trim() != '' && this.form.password.trim() != '') {
              // 编码加密
              let base64 = require('js-base64').Base64;

              let params = new URLSearchParams();
              params.append("userName",this.form.name);
              params.append("password",base64.encode(this.form.password));

              let that = this;

              this.$axios({
                url: '/api/login/login',
                method:'post',
                data: params
              }).then(data => {
                if(data.data.success){
                  that.rangeStatus = true;
                  if (that.status) {
                    that.$parent[that.status] = true;
                  }
                  //执行成功的函数
                  this.successFun && this.successFun();
                  sessionStorage.setItem('user', JSON.stringify(data.data.data));
                  sessionStorage.setItem('SESSION_NAME', data.data.data.realName);
                  this.$message({type: 'success', message: '登录成功'});

                  // 跳转到首页
                  this.$router.push('/homepage');
                }else if(data.data.code == '010'){
                  that.disable.on = true;
                }else if(data.data.code == '003'){
                  ele.style.transition = '.5s all';
                  ele.style.transform = 'translateX(0)';
                  //执行失败的函数
                  this.errorFun && this.errorFun();

                  this.$message({type: 'warning', message: '用户名和密码错误'});
                }
              }).catch(error => {
                this.$message({type:'error',message:'网络连接异常'});
              })
            } else {
              ele.style.transition = '.5s all';
              ele.style.transform = 'translateX(0)';
              //执行失败的函数
              this.errorFun && this.errorFun();

              this.$message({type: 'warning', message: '请输入用户名和密码'});
            }
          }
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },

3.Vue中Style部分

代码如下：

.login-btn {
    position: relative;
    text-align: center;
    top: 20px
}
.jc-range {
    border-radius: 20px;
    background-color: #5E9386;
    position: relative;
    transition: 1s all;
    user-select: none;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px; /*no*/
}

.jc-range i {
    position: absolute;
    left: 0;
    width: 60px; /*no*/
    height: 100%;
    color: #919191;
    background-color: #fff;
    border: 1px solid #bbb;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.jc-range.success {
    background-color: #7AC23C;
    color: #fff;
}
.jc-range.success i {
    color: #7AC23C;
}

---

总结

每天一个提升小技巧！！！