vue前端实现登录时加验证码

登录时图形验证

方法一：插件（vue移动端（PC端）图形验证码）

vue移动端（PC端）图形验证码
vue2-verify
地址：vue2-verify的npmjs地址

安装使用：

npm i vue2-verify

支持的验证码类型：

1. 常规验证码picture 常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。
2. 运算验证码compute 运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。
3. 滑动验证码slide 通过简单的滑动即可完成验证，应用与移动端体验很好。
4. 拼图验证码puzzle 拼图。
5. 选字验证码pick 通过按顺序点选图中的汉字完成验证，ie浏览器要求9或以上。

方法二：插件（一款拼图验证码）

slide-verify（图片建议传、不传的话默认图片加载非常慢）

安装使用：

npm install --save vue-monoplasty-slide-verify

地址：

github文档地址
gitee镜像地址

方法三：页面实例（点击图案可以切换字符）

vue实现登录时图形验证码
1.新建 Identify.vue 组件

<template><div><canvasid="s-canvas":width="contentWidth":height="contentHeight"></canvas></div></template><script>exportdefault{name:"identify",props:{identifyCode:{type: String,default:''},fontSizeMin:{type: Number,default:28},fontSizeMax:{type: Number,default:40},backgroundColorMin:{type: Number,default:180},backgroundColorMax:{type: Number,default:240},colorMin:{type: Number,default:50},colorMax:{type: Number,default:160},lineColorMin:{type: Number,default:40},lineColorMax:{type: Number,default:180},dotColorMin:{type: Number,default:0},dotColorMax:{type: Number,default:255},contentWidth:{type: Number,default:130},contentHeight:{type: Number,default:40}},methods:{// 生成一个随机数randomNum(min, max){return Math.floor(Math.random()*(max - min)+ min)},// 生成一个随机的颜色randomColor(min, max){let r =this.randomNum(min, max)let g =this.randomNum(min, max)let b =this.randomNum(min, max)return'rgb('+ r +','+ g +','+ b +')'},drawPic(){let canvas = document.getElementById('s-canvas')let 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'let x =(i +1)*(this.contentWidth /(this.identifyCode.length +1))let y =this.randomNum(this.fontSizeMax,this.contentHeight -5)let deg =this.randomNum(-30,30)// 修改坐标原点和旋转角度
      ctx.translate(x, y)
      ctx.rotate(deg * Math.PI/270)
      ctx.fillText(txt,0,0)// 恢复坐标原点和旋转角度
      ctx.rotate(-deg * Math.PI/270)
      ctx.translate(-x,-y)},drawLine(ctx){// 绘制干扰线for(let i =0; i <2; 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 <20; 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()}}},watch:{identifyCode(){this.drawPic()}},mounted(){this.drawPic()}}</script><stylelang="scss"scoped>#s-canvas{height: 38px;}</style>

2.在父组件 index.vue注册使用

<template><div@click="refreshCode"style="cursor: pointer;"><Identify:identifyCode="identifyCode"></Identify></div></template><script>import Identify from'@/components/test/identify'exportdefault{name:"index",components:{
   Identify 
  },data(){return{identifyCode:'',// 验证码规则identifyCodes:'123456789ABCDEFGHGKMNPQRSTUVWXYZ',}},methods:{// 切换验证码refreshCode(){this.identifyCode =''this.makeCode(this.identifyCodes,4)
      console.log(this.identifyCode)},// 生成随机验证码makeCode(o, l){for(let i =0; i<l; i++){this.identifyCode +=this.identifyCodes[
            Math.floor(Math.random()*(this.identifyCodes.length -0)+0)]}},mounted(){this.refreshCode()}}</script><stylescoped></style>