Vue-random-vertification-code NPM

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 事件刷新验证码，并返回验证码

5 years ago

5 years ago