vue使用vue2-verify(图形验证码)

1.安装

npm install vue2-verify

2.使用

</template>
  </div>
    <Verify
            ref="loginVerifyRef"
            :type="2"
            @error="error"
            :showButton="false"
            @success="success"
            :width="'100%'"
            :height="'40px'"
            :fontSize="'16px'"
          >
    </Verify>
  </div>
</template>
<script>
import Verify from "vue2-verify"; 
export default {
  data() {
    return {};
  },
  components: {
    Verify,
  },
  methods: {
    error(obj) {
      this.verify = false;
      obj.refresh();
    },
    success(obj) {
      this.verify = true;
      obj.refresh();
    },
  }
}
</script>

演示

3.事件说明

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

4.参数说明

常规验证码picture

type 验证码type为picture或者1
width 常规验证码的宽,支持百分比形式设置，如：width:100%
height 常规验证码的高,支持百分比形式设置，如：height:40%
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