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.js的学习好代码教程,请大家点击专题vue.js组件学习好代码教程、Vue.js前端组件学习好代码教程进行学习。

到此这篇关于VUE如何实现图片验证码功能就介绍到这了。狠抓基础是成功的基础 持之以恒是胜利的保证更多相关VUE如何实现图片验证码功能内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
vue如何实现倒计时获取验证码效果

vue 验证码界面如何实现点击后标灰并设置div按钮不可点击状态

Vue 如何实现登录界面验证码功能

vue中如何使用极验验证码的方法(附demo)

Vue插件之滑动验证码用法详解