vue 后台登录滑动验证

 

1、引入vue-monoplasty-slide-verify组件到项目里

先使用命令行安装：npm install --save vue-monoplasty-slide-verify

2、在main.js目录下添加代码

import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

3、在页面中使用

 <div class="slideClass">
            <el-dialog
                title="请拖动滑块到指定位置"
                :visible.sync="dialogVisible"
                :modal-append-to-body="false"
                width="380px"
                :center="true"
            >
                <slide-verify
                    :l="42"
                    :r="10"
                    :w="310"
                    :h="155"
                    :show="false"
                    slider-text="向右滑动"
                    @success="onSuccess"
                    @fail="onFail"
                ></slide-verify>
        </el-dialog>
 </div>



 methods: {
         //成功
        onSuccess() {
            this.loading = false;
            this.isGetcode = true;
            this.codeMsg = "60秒后再次获取";
            let index = 60;
            let timer = setInterval(() => {
                if (index == 0) {
                    clearInterval(timer);
                    this.isGetcode = false;
                }
                index--;
                this.codeMsg = index + "秒后再次获取";
            }, 1000);
            this.$axios
                .get(BASE_URL.BASE_URL1 + "/sendcode", {
                    params: {
                        mobile: this.form.operatorContacts
                    }
                })
                .then(res => {
                    if (res.data.status == "success") {
                        alertMessage(
                            this,
                            "手机验证码发送成功,请注意查收！",
                            "success"
                        );
                    }
                    //返回频繁提交验证码错误信息
                    if (res.data.status == "invalid_request") {
                        alertMessage(this, res.data.message, "warning");
                    }
                });
            this.dialogVisible = false;
            this.loading = false;
        },
        //失败
        onFail() {
            alertMessage(this, "验证失败，请刷新重新验证！", "warning");
            this.dialogVisible = false;
            this.loading = true;
        },
}

参考：vue登录滑动验证_带风的少年的博客-CSDN博客