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两种定义方式的区别、内部原理
Nov 21 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
jQuery的框架介绍
May 11 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
JS document内容及样式操作完整示例
Jan 14 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
一个简单的PHP入门源程序
2006/10/09 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
ECMAScript6--解构
2017/03/30 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
python创建进程fork用法
2015/06/04 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
婚纱店策划方案
2014/05/22 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
室外天线与收音机天线杆接合方法
2022/04/05 无线电