iview 使用滑动验证码登录

我们知道验证码的目的 是为了验证到底是人还是机器。
我这里写的只是模仿了样式，并没有进行那些复杂的操作，所以并不安全（不能判断人还是机器），下面看效果：

一、新建文件login-form.vue，代码如下：

　　1、模板表单里面加入活动验证码代码:

<FormItem prop="rangeStatus">
            <div class="jc-component__range" ref="dragcomponent">
                <div class="jc-range" :class="rangeStatus?'success':''">
                      <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon" id="jc-range"></i>
                         {{rangeStatus?successText:startText}}
                 </div>
             </div>
</FormItem>

　　2、js代码

<script>
export default {
    props: {
            // 成功之后的函数
            successFun: {
                type:  Function
            },
            //成功图标
            successIcon: {
                type: String,
                default: 'ivu-icon ivu-icon-ios-checkmark-circle'
            },
            //成功文字
            successText: {
                type: String,
                default () {
                    return this.$t('drag_successText')
                }
            },
            //开始的图标
            startIcon: {
                type: String,
                default: 'ivu-icon ivu-icon-ios-arrow-forward'
            },
            //开始的文字
            startText: {
                type: String,
                default () {
                    return this.$t('drag_startText')
                }
            },
            //失败之后的函数
            errorFun: {
                type: Function
            },
            //或者用值来进行监听
            status: {
                type: String
            }
        },
    data(){
        return {
            disX : 0,
            rangeStatus: false
        },
        rules () {
                const  checkRangeStatus = (rule, value, callback) => {
                    if (!this.rangeStatus) {
                        return callback(new Error(this.$t('drag_fail')));
                    } else {
                        callback();
                    }
                };
                return {
                    userName: [
                        { required: true, message: this.$t('username_required'), trigger: 'change' },
                        { type: 'string', min: 3, max: 20, trigger: 'change' }
                    ],
                    password: [
                        { required: true, message: this.$t('password_required'), trigger: 'change' },
                        { type: 'string', min: 6, max: 32, trigger: 'blur' }
                    ],
                    rangeStatus: [{ validator: checkRangeStatus, trigger: "change" }]
                }
            }
        },
    },
  methods:{
        //滑块移动
        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();
                        this.rangeStatus = false;
                    }else{
                        this.rangeStatus = true;
                        if(this.status){
                            this.$parent[this.status] = true;
                        }
                        //执行成功的函数
                        this.successFun && this.successFun();
                        let children = this.$refs.dragcomponent.children;
                        if(children[0].offsetParent.children.length>1) {
                            children[0].offsetParent.children[1].innerHTML = ''
                        }
                    }
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
        }
    }
};
</script>

3、css 代码（此处使用了sass）

没有安装需要手动安装：

npm install sass-loader --save-dev；

<style lang="scss" scoped>
  @mixin jc-flex{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .jc-component__range{
    .jc-range{
      background-color: #e9e9e9;
      position: relative;
      transition: 1s all;
      user-select: none;
      color: #585858;
      @include jc-flex;
      height: 50px; /*no*/
      &.success{
        background-color: #3bc923;
        color: #fff;
        i{
          color: #3bc923;
        }
      }
      i{
        position: absolute;
        left: 0;
        width: 50px;/*no*/
        height: 100%;
        color: #3fcd26;
        background-color: #fff;
        border: 1px solid #d8d8d8;
        cursor: pointer;
        font-size: 24px;
        @include jc-flex;
      }
    }
  }
</style>

在你的表单里面引入这个组件：

<login-form @on-success-valid="handleSubmit"></login-form>

注意的是如果验证失败，滑动条需要复原：

在你的表单提交方法里面验证失败加上下面的代码：

this.rangeStatus = false
this.disX = 0
document.getElementById("jc-range").style = ''

效果如下：