vue 验证码的几种方式

1.

<span@click="randyzm()"style="display: inline-block;text-align: center;width: 90px;font-size: 20px;height: 32px;line-height:32px;color: #2b3b4b;background-color: #1ea7fe">{{code}}</span>

data(){return{
			code:''}}// 方法randyzm(){//生成随机验证码let code=''let coden=''var codeLength=4//验证码的长度var 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','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(var i=0; i< codeLength; i++){//循环操作var index= Math.floor(Math.random()*62)//取得随机数的索引（0~61）
        code+= random[index]//根据索引取得随机数加到code上
        coden+= random[index]//根据索引取得随机数加到code上}this.code= coden//把code值赋给验证码
      console.log(this.code)},

2. 封装组建

父组建

<template><divclass="home"><vue-image@getIdentifyCode="getIdentifyCodes"/></div></template><script>import VueImagefrom'../../components/echarts/vueImageVerify.vue'
components:{
	VueImage},
methods:{getIdentifyCodes(value){
	      console.log('------', value)// 判断验证码输入是否有误 和输入的文本框// if (this.verify.toLowerCase() != value.toLowerCase()) {// Toast.fail('验证码有误')// return// }}}</script>

子组建

<template><divclass="div"@click="createdCode"><canvasid="div":width="contentWidth":height="contentHeight"></canvas></div></template><script>import Vuefrom'vue'exportdefault Vue.extend({
  props:{
    fontSizeMin:{
      type: Number,default:25},
    fontSizeMax:{
      type: Number,default:30},
    backgroundColorMin:{
      type: Number,default:255},
    backgroundColorMax:{
      type: Number,default:255},
    colorMin:{
      type: Number,default:0},
    colorMax:{
      type: Number,default:160},
    lineColorMin:{
      type: Number,default:100},
    lineColorMax:{
      type: Number,default:255},
    dotColorMin:{
      type: Number,default:0},
    dotColorMax:{
      type: Number,default:255},
    contentWidth:{
      type: Number,default:120},
    contentHeight:{
      type: Number,default:54}},data(){return{
      identifyCode:''}},mounted(){this.createdCode()},
  methods:{// 生成4个随机数createdCode(){const len=4const codeList=[]const chars='ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz01234569'const charsLen= chars.lengthfor(let i=0; i< len; i++){
        codeList.push(chars.charAt(Math.floor(Math.random()* charsLen)))}this.identifyCode= codeList.join('')this.$emit('getIdentifyCode',this.identifyCode.toLowerCase())this.drawPic()
      console.log(this.identifyCode)},// 生成一个随机数randomNum(min, max){return Math.floor(Math.random()*(max- min)+ min)},// 生成一个随机的颜色randomColor(min, max){const r=this.randomNum(min, max)const g=this.randomNum(min, max)const b=this.randomNum(min, max)return'rgb('+ r+','+ g+','+ b+')'},drawPic(){const canvas= document.getElementById('div')const ctx= canvas.getContext('2d')
      ctx.textBaseline='bottom'// 绘制背景
      ctx.fillStyle=this.randomColor(this.backgroundColorMin,this.backgroundColorMax)
      ctx.fillRect(0,0,this.contentWidth,this.contentHeight)// 绘制文字for(let i=0; i<this.identifyCode.length; i++){this.drawText(ctx,this.identifyCode[i], i)}this.drawLine(ctx)this.drawDot(ctx)},drawText(ctx, txt, i){
      ctx.fillStyle=this.randomColor(this.colorMin,this.colorMax)
      ctx.font=this.randomNum(this.fontSizeMin,this.fontSizeMax)+'px SimHei'const x=(i+1)*(this.contentWidth/(this.identifyCode.length+1))const y=this.randomNum(this.fontSizeMax,this.contentHeight-5)var deg=this.randomNum(-45,45)// 修改坐标原点和旋转角度
      ctx.translate(x, y)
      ctx.rotate((deg* Math.PI)/180)
      ctx.fillText(txt,0,0)// 恢复坐标原点和旋转角度
      ctx.rotate((-deg* Math.PI)/180)
      ctx.translate(-x,-y)},// 绘制干扰线drawLine(ctx){for(let i=0; i<5; i++){
        ctx.strokeStyle=this.randomColor(this.lineColorMin,this.lineColorMax)
        ctx.beginPath()
        ctx.moveTo(this.randomNum(0,this.contentWidth),this.randomNum(0,this.contentHeight))
        ctx.lineTo(this.randomNum(0,this.contentWidth),this.randomNum(0,this.contentHeight))
        ctx.stroke()}},// 绘制干扰点drawDot(ctx){for(let i=0; i<80; i++){
        ctx.fillStyle=this.randomColor(0,255)
        ctx.beginPath()
        ctx.arc(this.randomNum(0,this.contentWidth),this.randomNum(0,this.contentHeight),1,0,2* Math.PI)
        ctx.fill()}}}})</script><stylescoped>.div{height: 108px;cursor: pointer;}.div canvas{margin-top: 1px;margin-left: 8px;}</style>

3. 封装组建

父组建

<template><divclass="home"><rand-num@updateValue="updateValues"></rand-num></div></template><script>import RandNumfrom'../../components/randomNum.vue'
components:{
	RandNum},
methods:{updateValues(value){
      console.log('========', value)}}</script>

子组建

<template><divclass="ValidCode disabled-select":style="`width:${width}; height:${height}`"@click="refreshCode"><spanv-for="(item, index) in codeList":key="index":style="getStyle(item)">{{item.code}}</span></div></template><script>exportdefault{
  props:{
    width:{
      type: String,default:'100px'},
    height:{
      type: String,default:'54px'},
    length:{
      type: Number,default:4}},data(){return{
      codeList:[]}},mounted(){this.createdCode()},
  methods:{refreshCode(){this.createdCode()
      console.log(this.codeList.map((item)=> item.code).join(''))},createdCode(){const len=this.lengthconst codeList=[]const chars='ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'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:`2${[Math.floor(Math.random()*10)]}px`,
          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('updateValue', codeList.map((item)=> item.code).join(''))},