前端生成验证码

一.效果图

二、实现

2.1html

<template>
  <div class="outer-box">
    <div class="code-box">
      <div class="inout-code">
        <label class="label" for="inputCode">验证码：</label>
        <input type="text" v-model="inputCode" id="inputCode" />
      </div>
      <div class="code-show" @click.prevent="generateCode">
        <canvas ref="canvas" width="100" height="40"></canvas>
      </div>
    </div>
    <input type="button" value="确定" @click="checkCode" />
  </div>
</template>

2.2js