注册和登录时,基于安全考虑,一般要设置一个图形验证码功能,即Captcha插件,今天瞅了一下相关插件,选了一个比较便捷可以实现的做了一下封装,其原理是通过canvas实现的数字验证码,效果图如下:
安装地址
npm的安装地址如下:
https://www.npmjs.com/package/vue-captcha-code
兄弟们可以自行到npm上下载安装。
引入方式
引入方式很简单,直接import并在components中声明即可。
在上例中,我让一个textbox和Captcha协同,并用textbox的背景标识验证码是否已经通过,在交互上比较直观。
定制
这个组件可以通过预先设定的属性进行定制,具体包括高度、宽度、背景颜色、字符数量、字号等,并生成onChange等事件,大家可以根据下图中的定制项按需进行定制。
希望对大家有所帮助,如果在使用过程中有任何问题,可以随时跟我交流。