滑动验证插件 SlideVerify 的使用

今天注册要写图片验证，发现可以用滑动验证插件 SlideVerify 的使用，有个刷新一直写不了，最后发现直接用.reset就可以了，好气好气，这里随便记录一下使用步骤

先来看效果图

•  步骤1：安装

npm install --save vue-monoplasty-slide-verify

• 步骤2：再main.js使用

import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);

• 步骤3：页面使用

  <el-dialog
                    title="请拖动图片到指定位置"
                    :visible.sync="centerDialogVisible"
                    :close-on-click-modal="false"
                    width="30%"
                    center>
  //这个是图片验证
                    <slide-verify ref="slideblock"
                      :l="42"
                      :r="10"
                      :w="350"
                      :h="155"
                      slider-text="向右滑动"
                       @fail="onFail"
                      @success="onSuccess"
                    />
                  </el-dialog>
  
  
  <script&gt;
  export default {
    data () {
      return {
          centerDialogVisible:false,
            loading: false,
            // 图形验证是否通过
            verified: false,
      };
    },
    methods: {
  //失败
       onFail(){
                this.msg = ''
            },
  //重新刷新slide-verify
            onRefresh(){
                this.$refs.slideblock.reset();
            },
            // 图片验证成功之后调用注册接口
   onSuccess() {
        this.centerDialogVisible = false
             registersub(this.ruleForm).then(res =&gt;{
                    console.log("注册res",res)
                      if(res.data.code == 0){
                        this.$message({
                                  message: '注册成功',
                                  type: 'success'
                                });
                                this.onRefresh()
                      }else if(res.data.msg == "验证码输入错误"){
                        this.$message({
                          type:"info",
                          message:"验证码输入错误"
                        })
                        this.onRefresh()
                      }
                      else{
                        this.$message({
                          type:"info",
                          message:"该手机号已注册"
                        })
                        this.onRefresh()
                      }
                  });
  
      },
      // 注册提交验证
          submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) =&gt; {
                    if (valid) {
                      this.centerDialogVisible = true
                    } else {
                      console.log('注册失败!!');
                      return false;
                    }
                  });
                },
    },
  };
  </script>

  这里我把注册的接口的调用写在了图片验证成功里面，就是onsuccess（）函数里，就可以让图片验证成功再进行调用注册的接口。

• 一定要注意注册成功或者注册失败的时候重新刷新slide-verify，不然注册失败的时候图片是上上次验证成功的样子，需要自己刷新一下

最后发现 this.$refs.slideblock.reset();这样就可以刷新slide-verify，这里记录一下我写的过程和踩坑过程 

代码007普通

打赏 收藏 海报 链接