前端vue生成验证码技术

最新推荐文章于 2024-12-21 08:10:52 发布

凡人码农

最新推荐文章于 2024-12-21 08:10:52 发布

阅读量265

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/didadidadi03/article/details/138696821

版权

新建一个组件在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>