生成vue随机验证码

可以使用以下代码生成vue随机验证码：

<template>
  <div>
    <canvas ref="canvas" @click="refreshCode"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      canvasWidth: 120,
      canvasHeight: 40
    }
  },
  mounted() {
    this.refreshCode();
  },
  methods: {
    refreshCode() {
      let canvas = this.$refs.canvas;
      let ctx = canvas.getContext('2d');

      // 生成随机验证码
      let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
      let length = 4;
      let code = '';
      for (let i = 0; i < length; i++) {
        code += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      this.code = code;

      // 绘制验证码
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      ctx.font = 'bold 20px Arial';
      ctx.fillText(code, 30, 25);

      // 绘制干扰线
      for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = this.randomColor(40, 180);
        ctx.beginPath();
        ctx.moveTo(Math.random() * this.canvasWidth, Math.random() * this.canvasHeight);
        ctx.lineTo(Math.random() * this.canvasWidth, Math.random() * this.canvasHeight);
        ctx.stroke();
      }

      // 绘制干扰点
      for (let i = 0; i < 30; i++) {
        ctx.fillStyle = this.randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(Math.random() * this.canvasWidth, Math.random() * this.canvasHeight, 1, 0, 2 * Math.PI);
        ctx.fill();
      }
    },
    randomColor(min, max) {
      let r = Math.floor(Math.random() * (max - min) + min);
      let g = Math.floor(Math.random() * (max - min) + min);
      let b = Math.floor(Math.random() * (max - min) + min);
      return `rgb(${r},${g},${b})`;
    }
  }
}
</script>

这段代码使用了canvas绘制验证码，包括验证码的生成、绘制、干扰线和干扰点的绘制。在模板中，使用canvas标签引用canvas元素，在mounted函数中调用refreshCode方法生成验证码。refreshCode方法会生成随机验证码并绘制到canvas上。