滑动验证插件 SlideVerify 的使用

本文介绍: 最后发现 t h i s.$refs.slide block.reset();这样就可以刷新slide–v e r ify，这里记录一下我写的过程和踩坑过程。一定要注意注册成功或者注册失败的时候重新刷新sli de–verify，不然注册失败的时候图片是上上次验证成功的样子，需要自己刷新一下。这里我把注册的接口的调用写在了图片验证成功里面，就是on success（）函数里，就可以让图片验证成功再进行调用注册的接口。

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

先来看效果图

步骤1：安装

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

步骤2：再main.js 使用


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

步骤3：页面使用

&lt;el-dialog
                  title="请拖动图片到指定位置"
                  :visible.sync="centerDialogVisible"
                  :close-on-click-modal="false"
                  width="30%"
                  center&gt;
//这个是图片验证
                  &lt;slide-verify ref="slideblock"
                    :l="42"
                    :r="10"
                    :w="350"
                    :h="155"
                    slider-text="向右滑动"
                     @fail="onFail"
                    @success="onSuccess"
                  /&gt;
                &lt;/el-dialog&gt;


<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>