登录验证码样式
js部分
html代码
< el- form : model= "ruleForm" : rules= "rules" ref= "ruleForm" label- width= "0px" class = "ms-content" >
< el- form- item prop= "username" >
< el- input v- model= "ruleForm.username" placeholder= "username" >
< i slot= "prefix" class = "el-input__icon el-icon-lock" > < / i>
< / el- input>
< / el- form- item>
< el- form- item prop= "password" >
< el- input type= "password" placeholder= "password" v- model= "ruleForm.password" @keyup. enter. native= "submitForm('ruleForm')" >
< i slot= "prefix" class = "el-input__icon el-icon-lock" > < / i>
< / el- input>
< / el- form- item>
< el- form- item prop= "sidentify" >
< el- input placeholder= "sidentify" v- model= "ruleForm.sidentify" >
< i slot= "prefix" class = "el-input__icon el-icon-lock" > < / i>
< div slot= "suffix" style= "width: 100px;height: 38px; border-radius: 50px;" @click= "generatedCode" > { { code ? code : '点击获取' } } < / div>
< / el- input>
< / el- form- item>
< div class = "login-btn" >
< el- button type= "primary" round @click= "onSubmit" > 登录< / el- button>
< / div>
< / el- form>
js代码
generatedCode ( ) {
const random = [ 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 'A' , 'B' , 'C' , 'D' , 'E' , 'F' , 'G' , 'H' , 'I' , 'J' , 'K' , 'L' , 'M' , 'N' ,
'O' , 'P' , 'Q' , 'R' ,
'S' , 'T' , 'U' , 'V' , 'W' , 'X' , 'Y' , 'Z'
]
let code = ''
for ( let i = 0 ; i < 4 ; i++ ) {
let index = Math. floor ( Math. random ( ) * 36 )
code += random[ index]
}
console. log ( code)
this . code = code
} ,
效果图