VUE实现图片验证码功能

本文实例为大家分享了VUE实现图片验证码的具体代码，供大家参考，具体内容如下

1.概述

1.1 说明

在开发过程中，有时候需要使用图片验证码进行增加安全强度，在点击图片时更新新的图片验证码，记录此功能，以便后期使用。

2.示例

2.1 vue示例代码

模板El-form style='宽度： 400 px'El-form-item style=' height : 40px；边距-底部： 20pxEl-input class=' input ' maxlength=' 8 '占位符='请输入验证码/El-input div class=' divideidentifyingcode ' @ click=' getIdentifyingCode(true)' img id=' imgIdentifyingCode ' style=' height :40 px；宽度： 100像素；光标：指针；alt='点击更换标题='点击更换//div/El-form-item/El-form/template script导出默认值{ methods : }/* * *窗口代码* @ param { Boolean } bRefresh是否刷新*/getIdentifyingCode:函数(bRefresh){ let identify code src=' https://www。XXX。XXX。XXX/IMgcode '；if(bRefresh){ identifyCodeSrc=' https://www .XXX。XXX。XXX/IMgcode '？数学。random()；}让objs=document。getelementbyid(' imgIdentifyingCode ')；objs.src=identifyCodeSrc}，}}/scriptstyle .divideidentifyingcode { position : absolute；top : 0；右： 0；z指数： 5；宽度： 102像素；/*设置图片显示的宽*/高度： 40px/*图片显示的高*/背景： # e2e 2；保证金： 0；}/样式注意：使用Math.random()来获取新的验证码，后台支持使用接口获取验证码。

2.2 显示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。