VUE实现图片验证码功能
作者:ajuan 发布时间:2023-07-02 16:56:57
标签:VUE,验证码
本文实例为大家分享了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.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。
来源:https://www.cnblogs.com/ajuan/p/10194524.html#4387654


猜你喜欢
- Python2的字符串有两种:str和Unicode,Python3的字符串也有两种:str和Bytes。Python2的str相当于Pyt
- 地图 API Map() 构造器实例创建一个 Google 地图:<html><head><scriptsrc
- 前言夏天是用来告别的季节,因为毕业总在七月。那么七月之前的季节是用来干嘛的呢?当然是用来做毕业设计的啦今天还是写一些从简单到难的毕业设计或者
- div+css实现圆角边框,在网络上查看了一下,很多都是实现圆角的矩形的方法,我在这里介绍的是实现圆角矩形边框的方法。用代码说明问题:<
- 一、原理1.图片必须具有经纬度信息2.经纬度格式转换2.1 GPS点坐标的两种表示方式(误差还是有的)2.1.1 十进制换度分秒例:经纬度1
- 背景在某些场景下,我们可能会大量的使用字节数组,比如IO操作、编解码,如果不进行优化,大量的申请和释放字节数组会造成一定的性能损耗,因此有必
- 1、使用字符串函数replace>>> a = 'hello world'>>> a.r
- AjaxUpload.js文件的代码,供大家参考,具体内容如下/** * AJAX Upload ( http://valums.com/
- Static(静态)关键字用来定义静态方法和属性,static 也可用于定义静态变量以及后期静态绑定。1、静态变量 static varia
- 一、前言今天学习视频时课后作业是找出1000以内既是素数又是回文数的数,写代码这个很容易,结果一运行遇到了bug,输出结果跟预期不一样,调试
- 变量的种类在T-SQL中,变量按生存范围可以分为全局变量(Global Variable)和局部变量(Local Variable)全局变量
- 作用:用ASP程序将页面中的电话号码生成图片格式。 代码如下:<% Call Com_CreatValidCode
- 本文实例为大家分享了Python银行系统的具体代码,供大家参考,具体内容如下import timeimport randomimport p
- 目录json支持的格式:代码操作1.json转化为python2. python序列化为json总结json转化为python表示反序列化p
- 安全等于运算符(<=>)这个操作符和=操作符执行相同的比较操作,不过<=>可以用来判断NULL值。在两个操作数均为N
- 1.使用排序使数据有序通常,你的所有数据真正需要的仅仅是按某种顺序排列。SQL的ORDER BY语句可以以字母或数字顺序组织数据。因此,相似
- 前言这两天帮一个朋友处理了些 nc 数据,本以为很简单的事情,没想到里面涉及到了很多的细节和坑,无论是“知难行易”还是“知易行难”都不能充分
- 前面已经介绍过几种基本语句(print,import,赋值语句),下面我们来介绍条件语句,循环语句。一. print和import的更多信息
- 本文实例讲述了Python实现对excel文件列表值进行统计的方法。分享给大家供大家参考。具体如下:#!/usr/bin/env pytho
- python之pkl文件pkl文件是python里面保存文件的一种格式,如果直接打开会显示一堆序列化的东西。cPickle在python3中