VUE实现图片验证码功能

本文实例为大家分享了VUE实现图片验证码的具体代码，供大家参考，具体内容如下

1. 概述

1.1 说明

在开发过程中，有时候需要使用图片验证码进行增加安全强度，在点击图片时更新新的图片验证码，记录此功能，以便后期使用。

2. 示例

2.1 vue示例代码

<template>
<el-form style="width: 400px;">
<el-form-item style="height: 40px;margin-bottom: 20px;">
<el-input class="input" maxlength="8" placeholder="请输入验证码"></el-input>
<div class="divIdentifyingCode" @click="getIdentifyingCode(true)">
<img id="imgIdentifyingCode" style="height:40px; width: 100px; cursor: pointer;" alt="点击更换"
title="点击更换" />
</div>
</el-form-item>
</el-form>
</template>

<script>
export default {
methods: {
/**
* 窗口代码
* @param {Boolean} bRefresh 是否刷新
*/
getIdentifyingCode: function (bRefresh) {
let identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode";
if (bRefresh) {
identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode?" + Math.random();
}
let objs = document.getElementById("imgIdentifyingCode");
objs.src = identifyCodeSrc;
},
}
}
</script>

<style>
.divIdentifyingCode {
position: absolute;
top: 0;
right: 0;
z-index: 5;
width: 102px; /*设置图片显示的宽*/
height: 40px; /*图片显示的高*/
background: #e2e2e2;
margin: 0;
}
</style>

注意：使用 Math.random() 来获取新的验证码，后台支持使用接口获取验证码。

2.2 显示

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• 简单实现vue验证码60秒倒计时功能
• vue生成随机验证码的示例代码
• Vue中添加手机验证码组件功能操作方法
• vue 实现通过手机发送短信验证码注册功能
• vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
• 基于vue的短信验证码倒计时demo
• Vue.js实现移动端短信验证码功能
• vue实现验证码输入框组件
• vue中手机号,邮箱正则验证以及60s发送验证码的实例
• Vue 短信验证码组件开发详解