基于vue的验证码组件示例代码

最近自己写页面的时候需要一个验证码组件，模仿思想论坛，然后写登录注册UI。搜索了一下，没有找到合适的，大部分都是基于后端的，就自己写了一个。

示范

解析验证码组件

分析验证码功能

随机数，大小写字母(基本功能)不同的数字或字母有不同的颜色(功能优化)，不同的数字或字母有不同的字体(功能优化)，不同的数字或字母有不同的边距(功能优化)，不同的数字或字母有不同的倾斜角度(功能优化)，更多的功能优化.组件功能分析

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

模板

Click事件绑定到最外层的div，点击后会刷新验证码。Span是单个验证码的载体，样式是动态绑定的

template div class=' valid code disabled-select ' : style=' ` width : $ { width }；height: $ { height } ` ' @单击代码列表' : key=' index ' : style=' getStyle(item)' { { item . code } }/span/div/template methods中的='refreshCode' span v-for='(item，index)

RefreshCode刷新验证码的方法createdCode生成验证码的方法getStyle为每个元素生成动态样式

methods : { refresh code(){ this . createdCode()}，createdCode(){ let len=this . len . length，codeList=[]，Chars=' abcdefghjkmnpqrstwxyzabbcdefhijkmrstwxyz 0123456789 '，Charslen=chars.length//generate for(let I=0；我透镜；i ) {让RGB=[math . round(math . random()* 220)、Math.round(Math.random() * 240)、math . round(math . random()* 200)]codeList . push({ code : cars . charat(math . floor(math . random()* chars len))、//random code color : ` RGB($ { RGB })`、//random color font size : ` 1 $ {[math . floor(math . random()* 10$ emit ('update:值'，codelist。地图(物品=物品。代码)。join(“”)}，//动态绑定样式getstyle(data){ return ` color 3360 $ { data . color . font-size : $ { data . font size }；padd : $ { data . padding }；transform : $ { data . transform } ` } }完整代码

使用

有效代码：Value.sync='有效代码'/有效代码组件

template div class='有效代码已禁用-select ' : style=' width : $ { width }；height : $ { height } ` ` @在codeList ' :键=' index ' : style=' getStyle(item)' { { item。code } }/span/div/templatescript导出默认值{ name : ' validCode '，prop : { width : { type 3: String，default: '100px' }，height生成用于(设I=0；我透镜；I){ 0让RGB=[数学。圆(数学。random()* 220)、Math.round(Math.random() * 240)、Math。圆(数学。random()* 200)]代码列表。push({代码：个字符。charat(数学。地板(数学。random()* charsLen))、color: `rgb(${rgb})`、font size : ` 1 $ {[math。地板(数学。random()* 10)])px `,指向this.codeList=codeList //将当前数据派发出去这个$emit('update:value '，codeList.map(item=item.code).join(" " }，GetStyle(data){ return ` color : $ { data。颜色}；font-size : $ { data。字体大小}；padd : $ { data。填充}；转换： $ { data。transform } ` } } } }/脚本样式作用域lang=' scss ' .valid COde { display : flex justice-content center :align-items:居中；光标：指针；span { display : inline-block；} }/样式源码地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。