Vue如何自己封装一个验证码组件Identify

效果如图

验证码
image.png

1.首先新建一个Identify组件，我将它新建在了components文件夹下，写入以下内容,样式用了stylus预处理器，如果未安装请先安装，你也可以选择不使用stylus

npm install stylus --save

npm install stylus-loader --save

<template>
  <div class="s-canvas">
    <canvas class="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
    <span @click="changeCode" class="s-canvas-tip">换一张</span>
  </div>
</template>
<script>
    export default{
        name: 'Identify',
        props: {
            identifyCode: {
                type: String,
                default: '1234'
            },
            fontSizeMin: {
                type: Number,
                default: 20
            },
            fontSizeMax: {
                type: Number,
                default: 35
            },
            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: 100
            },
            contentHeight: {
                type: Number,
                default: 40
            },
            changeCode:{
                type:Function
            }
        },
        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.getElementsByClassName('s-canvas');
                let ctx = canvas[1].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)
                if(canvas[3]){
                    let ctx1 = canvas[3].getContext('2d');
                    ctx1.textBaseline = 'bottom'
                    // 绘制背景
                    ctx1.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
                    ctx1.fillRect(0, 0, this.contentWidth, this.contentHeight)
                    // 绘制文字
                    for (let i = 0; i < this.identifyCode.length; i++) {
                        this.drawText(ctx1, this.identifyCode[i], i)
                    }
                    this.drawLine(ctx1)
                    this.drawDot(ctx1)
                }
                if(canvas[5]){
                    let ctx2 = canvas[5].getContext('2d');
                    ctx2.textBaseline = 'bottom'
                    // 绘制背景
                    ctx2.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
                    ctx2.fillRect(0, 0, this.contentWidth, this.contentHeight)
                    // 绘制文字
                    for (let i = 0; i < this.identifyCode.length; i++) {
                        this.drawText(ctx2, this.identifyCode[i], i)
                    }
                    this.drawLine(ctx2)
                    this.drawDot(ctx2)
                }
            },
            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)
                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 < 3; 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 < 30; 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>
<style lang="stylus" scoped>
  .s-canvas{
    margin-left 10px
    display flex
    align-items center
    .s-canvas-tip{
      color #5C7099
      font-size 14px
      margin-left 10px
      cursor pointer
    }
  }
</style>

在你需要的页面进行引入使用

<template>
  <div class="change-email">
    <Identify :identifyCode="identifyCode" :changeCode="changeCode"></Identify>
  </div>
</template>

<script>
import Identify from "../../components/Identify";

export default {
      name: "changeEmail",
      data(){
          return{
              identifyCode:'1234',    //验证码的值
              identifyCodes:'1234567890'    //验证码的生成范围
          }
      },
      components:{
          Identify
      },
      //刚进来就初始化下值，不然刚进来一直是默认值1234
      mounted(){
        this.changeCode();
      },
      methods:{
          // 点击验证码刷新验证码
          changeCode () {
              this.identifyCode = ''
              this.makeCode(this.identifyCodes, 4)
          },
          // 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
          randomNum (min, max) {
              max = max + 1
              return Math.floor(Math.random() * (max - min) + min)
          },
          // 随机生成验证码字符串
          makeCode (data, len) {
              for (let i = 0; i < len; i++) {
                  this.identifyCode += data[this.randomNum(0, data.length - 1)]
              }
          }
      }
  }
</script>