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 相关文章推荐
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
Javascript类型判断相关例题及解析
Aug 26 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
Zend引擎的发展 [15]
2006/10/09 PHP
PHP新手上路(十三)
2006/10/09 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP类的特性实例分析
2016/09/28 PHP
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
JS验证字符串功能
2017/02/22 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
保送生自荐信范文
2013/10/06 职场文书
企业管理培训感言
2014/01/27 职场文书
成绩单家长评语大全
2014/04/16 职场文书
作文评语大全
2014/04/23 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
行风评议整改报告
2014/11/06 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
高效课堂教学反思
2016/02/24 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技