新建一个组件 在component包下,
<template>
<div class="ValidCode disabled-select " style="width:100%; height:100%" @click="refreshCode">
<span v-for="(item,index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
</div>
</template>
<script>
export default {
name:'validCode',
data(){
return{
length:4,
codeList:[]
}
},
mounted(){
this.createCode()
},
methods:{
refreshCode(){
this.createCode();
},
createCode(){
let len=this.length,
codeList=[],
chars='ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',
charsLen=chars.length
for(let i=0;i<len;i++){
let 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})`,
padding: `${[Math.floor(Math.random()*10)]}px`,
transform: `rotate(${Math.floor(Math.random()*90) - Math.floor(Math.random()*90)}deg)`
})
}
this.codeList=codeList
this.$emit('update:value',codeList.map(item => item.code).join(''))
},
getStyle(data){
return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
}
}
}
</script>
<style>
.ValidCode{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.ValidCode span{
display: inline-block;
font-size: 18px;
}
</style>
然后在需要用的界面引入一下这个组件 用一个code来准备接收验证码
绑定更新事件,通过getCode来获取验证码 getCode(code) this.code=code
<el-form-item prop="check">
<el-input type="text" prefix-icon="el-icon-circle-check"
v-model="loginForm.check" placeholder="验证码区分大小写" autocomplete="off" style=" width:50%;" ></el-input>
<div style="width:30%;float:right;height:40.8px"> <valid-code @update:value='getCode'/></div>
</el-form-item>