VUE实现图片验证码功能


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了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实现图片验证码功能

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
详解参数传递四种形式
Jul 21 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
微信小程序实现日历效果
Dec 28 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
countUp.js实现数字滚动效果
Oct 18 #Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 #Javascript
细述Javascript的加法运算符的具体使用
Oct 18 #Javascript
ElementUI之Message功能拓展详解
Oct 18 #Javascript
js实现简易计算器功能
Oct 18 #Javascript
JavaScript实现更换背景图片
Oct 18 #Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP 数字左侧自动补0
2008/03/31 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
GWebs公司笔试题
2012/05/04 面试题
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
实习期自我鉴定
2013/10/11 职场文书
市三好学生主要事迹
2014/01/28 职场文书
学习自我鉴定
2014/02/01 职场文书
一年级评语大全
2014/04/23 职场文书
活动宣传策划方案
2014/05/23 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
教师年终个人总结
2015/02/11 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
python实现Nao机器人的单目测距
2021/09/04 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android