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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
绑定回车enter事件代码
May 18 Javascript
javascript字符串函数汇总
Dec 06 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
javascript中的replace函数(带注释demo)
Jan 07 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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中如何实现Hook机制
2017/11/14 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
java直接调用python脚本的例子
2014/02/16 Python
python打开网页和暂停实例
2014/09/30 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python-numpy-指数分布实例详解
2019/12/07 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
中级会计职业生涯规划书
2014/03/01 职场文书
师恩难忘教学反思
2014/04/27 职场文书
小学教师师德承诺书
2014/05/23 职场文书
大学生就业自荐书
2014/06/16 职场文书
孩子教育的心得体会
2014/09/01 职场文书
2015年信访工作总结
2015/04/07 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书