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 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
编写v-for循环的技巧汇总
Dec 01 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
什么是MVC,好东西啊
2007/05/03 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
Vue渲染函数详解
2017/09/15 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
基于python实现百度翻译功能
2019/05/09 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
网上开店必备创业计划书
2014/01/26 职场文书
法制演讲稿
2014/09/10 职场文书
实习证明格式范文
2014/10/14 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers