Vue插件之滑动验证码

安装

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

使用方法

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


// 使用

  
    
      
    


// script
export default {
   name: 'App',
    data(){
        return {
             text: '向右滑' // 图片滑动验证码底部文字，
             dialogVisible ：false
        }
    },
    methods: {
        onSuccess(){
              this.$refs.slideblock.reset();     //重置组件    
         this.dialogVisible = false;        //隐藏组件
         if( this.islogin ){
          //  console.log(this.islogin)
             this.passwordLogin1();判断是否其他方式登录
         } else {
            this.$message({
              message: '验证成功！',
              type: 'success'
            });
             this.getVerificationCode1(); 登录接口
         }                                  //图片校验成功 
        },
        onFail(){
            this.$message.error("验证未通过！");
        this.$refs.slideblock.reset();      //重置组件
        this.dialogVisible = false;         //隐藏组件
        },
        onRefresh(){
             this.$message({
          message: '刷新成功！',
          type: 'success'
         });
        this.$refs.slideblock.reset();      //重置组件
        }
    }
}

参数说明
props传参（均为可选）

参数	类型	默认值	描述
l	Number	42	滑块的边长
r	Number	10	滑块突出圆的半径
w	Number	310	canvas画布的宽
h	Number	155	canvas画布的高
sliderText	String	Slide filled right	滑块底纹文字

自定义回调函数

事件名	类型	描述
success	Function	验证码匹配成功的回调
fail	Function	验证码未匹配的回调
refresh	Function	刷新按钮的回调