H5图形验证码功能,初始化显示图形验证码,点击图片切换验证码图片

image-20210806103748479

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<li>
<span class="ipt-name captcha"></span>
<input
type="text"
maxlength="11"
placeholder="请输入验证码"
v-model="graphValidateCode"
/>
<img
@click="changeImage"
class="verify-img"
:src="imageSrc"
alt="Waiting..."
/>
</li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default {
data() {
return {
graphValidateCode: "", //图形验证码
imageSrc: "",
};
},
methods: {
//切换验证码
changeImage() {
this.imageSrc = "/b/captcha/getCaptcha?r=" + Math.random();
},
},
mounted() {
//页面渲染后执行
this.changeImage();
},
}

后台接口

QQ图片20210806104929