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 复制或插入Html的实现方法小结
May 19 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
PHP可变变量学习小结
2015/11/29 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
深入理解vue中的$set
2017/06/01 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python 加密的实例详解
2017/10/09 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
美国社交购物市场:MassGenie
2019/02/18 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
副总经理岗位职责
2014/03/16 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
青年志愿者活动感想
2015/08/07 职场文书
Python基础详解之描述符
2021/04/28 Python
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
python在package下继续嵌套一个package
2022/04/14 Python