vue验证码组件

2022-07-10 11:16:22

代码如下:

<template><divclass="join_formitem"><labelclass="enquiry">验证码<span>:</span></label><divclass="captcha"><inputtype="text"placeholder="请输入验证码"class="yanzhengma_input"v-model="picLyanzhengma" /><inputtype="button" @click="createdCode"class="verification"v-model="checkCode" /></div></div></template><script>
exportdefault {
  data(){return{
      code:'',
      checkCode:'',                   
      picLyanzhengma:''//..验证码图片
    }
  },
  created(){this.createdCode()
  },
  methods: {// 图片验证码
    createdCode(){// 先清空验证码输入this.code =""this.checkCode =""this.picLyanzhengma =""// 验证码长度const codeLength =4// 随机数const random =newArray(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')for(let i =0;i < codeLength;i++){// 取得随机数的索引(0~35)let index =Math.floor(Math.random() *36)// 根据索引取得随机数加到code上this.code += random[index]
      }// 把code值赋给验证码this.checkCode =this.code
    }
  }
}</script><style>.yanzhengma_input{font-family:'Exo 2',sans-serif;border:1px solid#fff;color:#fff;outline: none;border-radius:12px;letter-spacing:1px;font-size:17px;font-weight: normal;background-color:rgba(82,56,76,.15);padding:5px05px10px;margin-left:30px;height:30px;margin-top:25px;border:1px solid#e6e6e6;}.verification{border-radius:12px;width:100px;letter-spacing:5px;margin-left:50px;height:40px;transform:translate(-15px,0);}.captcha{height:50px;text-align: justify;}</style>

这里写图片描述

  • 作者:UIEngineer
  • 原文链接:https://blog.csdn.net/zjsfdx/article/details/82381461
    更新时间:2022-07-10 11:16:22