random-vertification-code

A Vue plug-in for generating random vertification codes

安装

npm install --save vue-random-vertification-code

使用

import Vue from 'vue'
import VCode from 'vue-random-vertification-code'
Vue.use(VCode)

 <v-code></v-code>

参数说明

属性

| 属性 | 名 称 | 类 型 | 默认值 | | :----------------: | :--------------------: | :----: | :-----------------------------------------------------------------------------------------------------------------------------------------: | | vertifyCode | 用户传入验证码 | String | - | | vertifyCodeLength | 验证码长度 | Number | 4 | | fontSizeMin | 字体最小值 | Number | 24 | | fontSizeMax | 字体最大值 | Number | 28 | | backgroundColorMin | 背景颜色范围最小值 | Number | 255 | | backgroundColorMax | 背景颜色范围最大值 | Number | 255 | | colorMin | 字体颜色最小值 | Number | 0 | | colorMax | 字体颜色最大值 | Number | 160 | | blurlineColorMin | 干乱线条颜色最小值 | Number | 100 | | bulrlineColorMax | 干乱线条颜色最大值 | Number | 255 | | blurdotColorMin | 干乱点状颜色最小值 | Number | 0 | | blurdotColorMax | 干乱点状颜色最大值 | Number | 255 | | contentWidth | 画布宽 | Number | 100 | | contentHeight | 画布高 | Number | 24 | | randomNumString | 用于生成验证码的字符串 | String | 'a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0' |

方法

click 方法，点击重新生成验证码，并返回生成的验证码 code

demo

<v-code @click="reCreate" ></v-code>

//method

reCreate(code){//返回生成的验证码
	cosole.log(code);
}

说明

1、当验证码由后端传回前端使用时，需要用到 vertifyCode

<v-code @click="reCreate"  :vertifyCode ='code'></v-code>

//data
	code:''

//method

reCreate(){//单击重置验证码
	this.code = '2345'//赋予新的验证码
}

2、也可使用存前端验证码，就不用绑定 vertifyCode 的值，click 事件刷新验证码，并返回验证码