vue 插件 滑块验证_一款基于vue开发的简单图片滑块验证码【使用笔记】

github文档地址

1. 安装

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

2. main.js 中引用

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

Vue.use(SlideVerify);

3. 页面中使用（封装，直接可以拿去用）

<template>
 <div>
   <p>安全验证</p>
   <a-card>
     <div class="page-slidecode">
       <!--    l:滑块的边长  
               r:滑块突出圆的半径
               w:canvas画布的宽
               h:canvas画布的高
               imgs:背景图数组
               sliderText:滑块底纹文字
               accuracy:滑动验证的误差范围,默认值为5
               show：是否显示刷新按钮
   
               success：验证码匹配成功的回调
               fail：验证码未匹配的回调
               refresh：点击刷新按钮后的回调函数
               fulfilled：刷新成功之后的回调函数
    	  -->
       <slide-verify
         :l="42"
         :r="10"
         :w="310"
         :h="155"
         :imgs="bgimgs"
         @success="onSuccess"
         @fail="onFail"
         @refresh="onRefresh"
         ref="slideblock"
         :slider-text="text"
       ></slide-verify>
     </div>
   </a-card>
   <div class="yz-msg">{{ msg }}</div>
 </div>
</template>

<script>
// import aa from "../../imgs/###.png"; //	如果使用网络图片资源就无需引入
// import bb from "../../imgs/###.png"; //	如果使用网络图片资源就无需引入
// import cc from "../../imgs/###.png"; //	如果使用网络图片资源就无需引入
import imgList from "../../imgs//index.js";//单独封装一个图片存储文件
export default {
 data() {
   return {
     msg: "",
     bgimgs: imgList,
     // bgimgs:[],	//	如果使用网络图片资源就用该值
     text: "向右滑动~",
     state: false,
   };
 },
 export default {
  name: 'App',
   data(){
       return {
           msg: '',
           text: '向右滑',
           // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
           accuracy: 1,
       }
   },
   methods: {
       onSuccess(times){
          console.log('验证通过，耗时 +' times + '毫秒');
           this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
       },
       onFail(){
           console.log('验证不通过');
           this.msg = ''
       },
       onRefresh(){
           console.log('点击了刷新小图标');
           this.msg = ''
       },
       onFulfilled() {
           console.log('刷新成功啦！');
       },
       onAgain() {
           console.log('检测到非人为操作的哦！');
           this.msg = 'try again';
           // 刷新
           this.$refs.slideblock.reset();
       },
       handleClick() {
       	// 父组件直接可以调用刷新方法
           this.$refs.slideblock.reset();
       },
   }
}