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 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
Javascript与vbscript数据共享
Jan 09 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
详解Vue底部导航栏组件
May 02 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
JavaScript中的私有成员
2006/09/18 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
js+css实现打字效果
2020/06/24 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
js实现网页随机验证码
2020/10/19 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
详解爬虫被封的问题
2019/04/23 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python sys模块常用方法解析
2020/02/20 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
毕业设计工作总结
2015/08/14 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL