Vue实现随机验证码功能

步骤1 创建一个名为identify.vue的子组件

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<template>
 <div class="s-canvas">
 <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
 </div>
</template>
<script>
export default {
 name: 'SIdentify',
 props: {
 // 默认注册码
identifyCode: {
    type: String,
    default: "1234"
},
// 字体最小值
fontSizeMin: {
    type: Number,
    default: 35
},
// 字体最大值
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: 100
},
// 干扰线颜色色值最大值
lineColorMax: {
    type: Number,
    default: 200
},
// 干扰点颜色色值最小值
dotColorMin: {
    type: Number,
    default: 0
},
// 干扰点颜色色值最大值
dotColorMax: {
    type: Number,
    default: 255
},
// 画布宽度
contentWidth: {
    type: Number,
    default: 120
},
// 画布高度
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)
  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()
  }
 }
 },
 watch: {
 identifyCode() {
  this.drawPic()
 }
 },
 mounted() {
 this.drawPic()
 }
}
</script>

步骤2 在子组件中进行注册和引用

<script>
    import SIdentify from "./common/sIdentify.vue";
    export default {
        components: { SIdentify },
    }
</script>

步骤3 在主页面中使用子组件
1、template中：

<template>
  <div class="code"  @click="refreshCode">
    <s-identify :identifyCode="identifyCode"></s-identify>
  </div>
</template>

2、 data中：

data() {
     return {
         identifyCode: "",
         identifyCodes: "",
     }
},

3、methods中：

methods: {
    // 生成随机数
    randomNum(min, max) {
        max = max + 1
        return Math.floor(Math.random() * (max - min) + min);
    },
    // 更新验证码
    refreshCode() {
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
        console.log('当前验证码==',this.identifyCode);
    },
    // 随机生成验证码字符串
    makeCode(data, len) {
        for (let i = 0; i < len; i++) {
            this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes)]
        }
    },
}