vue2实现验证功能

1.数字验证框

安装

npm i vue2-verify

使用

<template>
      <Verify @success="alert('success')" @error="alert('error')" :type="1"></Verify>
</template>


<script>
    import Verify from 'vue2-verify'

    export default {
        name: 'app',
        methods: {
            alert(text) {
                console.log(text)
            }
        },
        components: {
            Verify
        }
    }
</script>

参数说明

事件
参数 说明

ready 验证码初始化成功的回调函数。
success 验证码匹配成功后的回调函数。如要重新初始化：success:function(obj){obj.refresh();}。
error 验证码匹配失败后的回调函数。

常规验证码picture
参数 说明

type 验证码type为picture或者1
width 常规验证码的宽,支持百分比形式设置，如：width:100%。
height 常规验证码的高,支持百分比形式设置，如：height:10%。
fontSize 常规验证码中的字母&数字的字体大小，默认为30px。
codeLength 常规验证码中显示的验证码个数，默认为6。

运算验证码compute
参数 说明

type 验证码type为compute或者2
figure 运算验证码的位数,默认是100以内的数字，即两位数。如果是要设置三位数，则设置figure:1000。
arith 算法选择，支持加、减、乘。设置为1至3分别代表加减乘，0为随机切换。。
width 运算验证码的宽,支持百分比形式设置，如：width:100%。
height 运算验证码的高,支持百分比形式设置，如：height:10%。
fontSize 运算验证码中的数字的字体大小，默认为30px。
showButton 是否显示确定按钮，默认为true

滑动验证码slide
参数 说明

type 验证码type为slide或者3
vOffset 滑动验证码的误差量，如：误差量为5px就能完成验证，设置vOffset:5。
explain 滑动条内的提示，不设置默认是：向右滑动完成验证。
barSize 其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如：{width:‘100%’,height:‘40px’}
showButton 是否显示确定按钮，默认为true

拼图验证码puzzle
参数 说明

type 验证码type为puzzle或者4
mode 验证码的显示方式，弹出式pop，固定fixed，默认是：mode : ‘fixed’。
vOffset 滑动验证码的误差量，默认单位是px。如：误差量为5px就能完成验证，设置vOffset:5。
vSpace 验证码图片和移动条容器的间隔，默认单位是px。如：间隔为5px，设置vSpace:5。
explain 滑动条内的提示，不设置默认是：‘向右滑动完成验证’。
imgUrl 背景图片的地址，不设置默认是：‘images/’。
imgName 验证码背景图的数组集合，默认从images目录中进行读取，如 [‘1.jpg’, ‘2.jpg’]。
imgSize 其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:‘100%’,height:‘200px’}。
blockSize 其中包含了width、height两个参数，分别代表拼图块的宽度和高度，如:{width:‘40px’,height:‘40px’}。。
barSize 其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如:{width:‘100%’,height:‘40px’}
showButton 是否显示确定按钮，默认为true

选字验证码pick
参数 说明

type 验证码type为pick或者5
mode 验证码的显示方式，弹出式pop，固定fixed，默认是：mode : ‘fixed’。
defaultNum 验证码中出现的文字数量，如要默认4个字
checkNum 验证码中要求比对的文字数量，如要按序比对2个字
vSpace 验证码图片和移动条容器的间隔，默认单位是px。
imgUrl 背景图片的地址，不设置默认是：‘images/’。
imgName 验证码背景图的数组集合，默认从images目录中进行读取，如 [‘1.jpg’, ‘2.jpg’]。
imgSize 其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:‘100%’,height:‘200px’}。
barSize 其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如:{width:‘100%’,height:‘40px’}
showButton 是否显示确定按钮，默认为true
 

2.图片验证

安装

npm install vue-puzzle-vcode --save

使用

<template>
  <Vcode
    :show="isShow"
    @onSuccess="onSuccess"
    @onClose="onClose"
  />
  <button @click="onSubmit">登录</button>
</template>

<script>
  import Vcode from "vue-puzzle-vcode";
  export default {
    data(){
      return {
        isShow: false, // 验证码模态框是否出现
      }
    },
    components:{
      Vcode
    },
    methods:{
      onSubmit(){
        this.isShow = true;
      },
      // 用户通过了验证
      onSuccess(msg){
        this.isShow = false; // 通过验证后，需要手动隐藏模态框
      },
      // 用户点击遮罩层，应该关闭模态框
      onClose(){
        this.isShow = false;
      }
    }
  }
</script>

自定义图片

<template>
  <Vcode :imgs="[Img1, Img2]" />
</template>

<script>
import Img1 from '/assets/img1.png';
import Img2 from '/assets/img2.png';

export default {
  data(){
    return {
      Img1,
      Img2
    }
  }
}
</script>

参数说明

字段 类型 默认值 说明
show Boolean false 是否显示验证码弹框
canvasWidth Number 310 主图区域的宽度
canvasHeight Number 160 主图区域的高度
imgs Array null 自定义图片，见下方例子
successText String “验证通过！” 验证成功时的提示文字
failText String “验证失败，请重试” 验证失败时的提示文字
sliderText String “拖动滑块完成拼图” 下方滑动条里的文字

事件

事件名 返回值 说明
onSuccess 偏差值 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值px
onFail 偏差值 验证失败时会触发，返回值同上
onClose null 用户点击遮罩层的回调