一.效果图
二、实现
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>