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文件中调用js的实现方法小结
Oct 23 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 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
实用函数5
2007/11/08 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
解析vue中的$mount
2017/12/21 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python编程中的异常处理教程
2015/08/21 Python
Python二分查找详解
2015/09/13 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python基于socket函数实现端口扫描
2020/05/28 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
《雕塑之美》教学反思
2014/04/24 职场文书
励志演讲稿500字
2014/08/21 职场文书
珍惜资源的建议书
2014/08/26 职场文书
2014最新实习证明模板
2014/10/02 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
实习证明模板
2015/06/16 职场文书
个人更名证明
2015/06/23 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
初一语文教学反思
2016/03/03 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript