Vue验证码组件示例，如何实现长尾词验证？

本文共计907个文字，预计阅读时间需要4分钟。

最近在写页面，模仿思维导图，然后写登录注册UI的时候，需要添加一个验证码组件。搜索了一下，没找到合适的，大部分都是基于后端的。干脆自己写一个。演示+分析验证码组件。

最近在自己写页面，模仿思否论坛，然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。

演示

分析验证码组件

分析验证码功能

• 随机出现的数字大小写字母 （基础功能）
• 不同的数字或者字母有不同的颜色 (功能优化)
• 不同的数字或者字母有不同的字体大写 (功能优化)
• 不同的数字或者字母有不同的边距 (功能优化)
• 不同的数字或者字母有不同的倾斜角度 (功能优化)
• 更多功能优化...

分析组件功能

• 可以设置生成验证码的长度 (基本功能)
• 可以设置验证码组件的宽高 (基本功能)

编写验证码组件

template

最外层div绑定点击事件，点击后刷新验证码。