代码如下:
<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>