注册和登录时，基于安全考虑，一般要设置一个图形验证码功能，即Captcha插件，今天瞅了一下相关插件，选了一个比较便捷可以实现的做了一下封装，其原理是通过canvas实现的数字验证码，效果图如下：

安装地址

npm的安装地址如下：

https://www.npmjs.com/package/vue-captcha-code

兄弟们可以自行到npm上下载安装。

引入方式

引入方式很简单，直接import并在components中声明即可。

在上例中，我让一个textbox和Captcha协同，并用textbox的背景标识验证码是否已经通过，在交互上比较直观。

定制

这个组件可以通过预先设定的属性进行定制，具体包括高度、宽度、背景颜色、字符数量、字号等，并生成onChange等事件，大家可以根据下图中的定制项按需进行定制。

希望对大家有所帮助，如果在使用过程中有任何问题，可以随时跟我交流。

#前端##编程##我上头条#