Vue 实现登录界面验证码功能


Posted in Javascript onJanuary 03, 2020

登录界面

Vue 实现登录界面验证码功能

SIdentify

创建验证码组件,实现绘画出图片验证码

<template>
 <div class="s-canvas">
 <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
 </div>
</template>
<script>
 export default {
 name: 'SIdentify',
 props: {
 identifyCode: {
 type: String,
 default: '1234'
 },
 fontSizeMin: {
 type: Number,
 default: 25
 },
 fontSizeMax: {
 type: Number,
 default: 30
 },
 backgroundColorMin: {
 type: Number,
 default: 255
 },
 backgroundColorMax: {
 type: Number,
 default: 255
 },
 colorMin: {
 type: Number,
 default: 0
 },
 colorMax: {
 type: Number,
 default: 160
 },
 lineColorMin: {
 type: Number,
 default: 100
 },
 lineColorMax: {
 type: Number,
 default: 255
 },
 dotColorMin: {
 type: Number,
 default: 0
 },
 dotColorMax: {
 type: Number,
 default: 255
 },
 contentWidth: {
 type: Number,
 default: 112
 },
 contentHeight: {
 type: Number,
 default: 31
 }
 },
 methods: {
 // 生成一个随机数
 randomNum(min, max) {
 return Math.floor(Math.random() * (max - min) + min)
 },
 // 生成一个随机的颜色
 randomColor(min, max) {
 let r = this.randomNum(min, max)
 let g = this.randomNum(min, max)
 let b = this.randomNum(min, max)
 return 'rgb(' + r + ',' + g + ',' + b + ')'
 },
 drawPic() {
 let canvas = document.getElementById('s-canvas')
 let ctx = canvas.getContext('2d')
 ctx.textBaseline = 'bottom'
 // 绘制背景
 ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
 ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
 // 绘制文字
 for (let i = 0; i < this.identifyCode.length; i++) {
  this.drawText(ctx, this.identifyCode[i], i)
 }
 this.drawLine(ctx)
 this.drawDot(ctx)
 },
 drawText(ctx, txt, i) {
 ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
 ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
 let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
 let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
 var deg = this.randomNum(-45, 45)
 // 修改坐标原点和旋转角度
 ctx.translate(x, y)
 ctx.rotate(deg * Math.PI / 180)
 ctx.fillText(txt, 0, 0)
 // 恢复坐标原点和旋转角度
 ctx.rotate(-deg * Math.PI / 180)
 ctx.translate(-x, -y)
 },
 drawLine(ctx) {
 // 绘制干扰线
 for (let i = 0; i < 5; i++) {
  ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
  ctx.beginPath()
  ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
  ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
  ctx.stroke()
 }
 },
 drawDot(ctx) {
 // 绘制干扰点
 for (let i = 0; i < 80; i++) {
  ctx.fillStyle = this.randomColor(0, 255)
  ctx.beginPath()
  ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
  ctx.fill()
 }
 }
 },
 watch: {
 identifyCode() {
 this.drawPic()
 }
 },
 mounted() {
 this.drawPic()
 }
 }
</script>
<style scoped>
 .s-canvas {
 height: 38px;

 }
 .s-canvas canvas{
 margin-top: 1px;
 margin-left: 8px;
 }
</style>

在登录界面引入验证码组件并注册

import SIdentify from '@/components/common/SIdentify'
 components: { SIdentify },

登录的form

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
 <el-form-item prop="username">
  <el-input v-model="ruleForm.username" placeholder="账号">
  <i slot="prepend" class="el-icon-s-custom"/>
  </el-input>
 </el-form-item>
 <el-form-item prop="password">
  <el-input type="password" placeholder="密码" v-model="ruleForm.password">
  <i slot="prepend" class="el-icon-lock"/>
  </el-input>
 </el-form-item>
 <el-form-item prop="code">
  <el-row :span="24">
  <el-col :span="12">
  <el-input v-model="ruleForm.code" auto-complete="off" placeholder="请输入验证码" size=""
   @keyup.enter.native="submitForm('ruleForm')"></el-input>
  </el-col>
  <el-col :span="12">
  <div class="login-code" @click="refreshCode">
  <!--验证码组件-->
  <s-identify :identifyCode="identifyCode"></s-identify>
  </div>
  </el-col>
  </el-row>
 </el-form-item>
 <el-form-item>
  <div class="login-btn">
  <el-button type="primary" @click="submitForm()">登录</el-button>
  </div>
 </el-form-item>
 <p style="font-size:12px;line-height:30px;color:#eaeaea;">Tips : 请输入账号密码登陆</p>
 </el-form>

点击刷新验证码

randomNum (min, max) {
 return Math.floor(Math.random() * (max - min) + min)
 },
 refreshCode () {
 this.identifyCode = ''
 this.makeCode(this.identifyCodes, 4)
 },
 makeCode (o, l) {
 for (let i = 0; i < l; i++) {
 this.identifyCode += this.identifyCodes[
  this.randomNum(0, this.identifyCodes.length)
 ]
 }
 }

总结

以上所述是小编给大家介绍的Vue 实现登录界面验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 #Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 #Javascript
uni-app如何实现增量更新功能
Jan 03 #Javascript
JS实现简单日历特效
Jan 03 #Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 #Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 #Javascript
Element-UI+Vue模式使用总结
Jan 02 #Javascript
You might like
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
Python连接字符串过程详解
2020/01/06 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
活动总结报告格式
2014/05/09 职场文书
个人综合鉴定材料
2014/05/23 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
逃课检讨书
2015/01/26 职场文书
未中标通知书
2015/04/17 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
小学入学感言
2015/08/01 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书