前端验证码

<template>
<div
class="ValidCode disabled-select"
:style="`width:${width}; height:${height}`"
@click="refreshCode"
>
<span
v-for="(item,index) in codeList"
:key="index"
:style="getStyle(item)"
>{{item.code}}</span>
</div>
</template>

<script>
export default{
name:'ValidCode',
model:{
prop:'value',
event:'input'
},
props:{
width:{
type:String,
default:'100px'
},
height:{
type:String,
default:'40px'
},
length:{
type:Number,
default:4
},
refresh:{
type:Number
}
},
data(){
return{
codeList:[]
}
},
watch:{
refresh(){
this.createdCode()
}
},
mounted(){
this.createdCode()
},
methods: {
refreshCode() {
this.createdCode()
},
createdCode: function () {
const len = this.length
const codeList = []
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefghjkmnpqrstwxyz0123456789'
const charsLen = chars.length
//生成
for (let i = 0; i < len; i++) {
const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
codeList.push({
code: chars.charAt(Math.floor(Math.random() * charsLen)),
color: `rgb(${rgb})`,
fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,
padding: `${[Math.floor(Math.random() * 10)]}px`,
transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
})
}
//指向
this.codeList = codeList
//将当前数据派发出去
// console.log(codeList,map(item=>item.code).join(''))
this.$emit('input', codeList.map(item => item.code).join(''));
},
getStyle(data) {
return `color:${data.color};font-size:${data.fontSize};padding:${data.padding};transform:${data.transform}`
}
}

}
</script>

<style scoped>
.ValidCode{
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
}
.ValidCode span{
display: inline-block;
}
</style>