最近在自己写页面,模仿思否论坛,然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的,而且大多都是基于后端的,于是自己手写一个。
演示
分析验证码组件
分析验证码功能
分析组件功能
编写验证码组件
template
最外层div绑定点击事件,点击后刷新验证码。
span是单个验证码的载体,样式动态绑定
{{item.code}}
methods
refreshCode 刷新验证码的方法
createdCode 生成验证码的方法
getStyle 为每个元素生成动态的样式
methods: { refreshCode () { this.createdCode() }, createdCode () { let len = this.length, codeList = [], chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789', charsLen = chars.length // 生成 for (let i = 0; iitem.code).join('')) }, // 动态绑定样式 getStyle (data) { return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}` } }
完整代码
使用
组件
{{item.code}}
源码地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。