Vue实现随机验证码功能


Posted in Vue.js onDecember 29, 2020

本文实例为大家分享了Vue实现随机验证码功能的具体代码,供大家参考,具体内容如下

步骤1:创建一个名为identify.vue的子组件

<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: 35
},
// 字体最大值
fontSizeMax: {
  type: Number,
  default: 35
},
// 背景颜色色值最小值
backgroundColorMin: {
  type: Number,
  default: 180
},
// 背景颜色色值最大值
backgroundColorMax: {
  type: Number,
  default: 240
},
// 字体颜色色值最小值
colorMin: {
  type: Number,
  default: 50
},
// 字体颜色色值最大值
colorMax: {
  type: Number,
  default: 160
},
// 干扰线颜色色值最小值
lineColorMin: {
  type: Number,
  default: 100
},
// 干扰线颜色色值最大值
lineColorMax: {
  type: Number,
  default: 200
},
// 干扰点颜色色值最小值
dotColorMin: {
  type: Number,
  default: 0
},
// 干扰点颜色色值最大值
dotColorMax: {
  type: Number,
  default: 255
},
// 画布宽度
contentWidth: {
  type: Number,
  default: 120
},
// 画布高度
contentHeight: {
  type: Number,
  default: 40
}
 },
 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>

步骤2 在子组件中进行注册和引用

<script>
  import SIdentify from "./common/sIdentify.vue";
  export default {
    components: { SIdentify },
  }
</script>

步骤3 在主页面中使用子组件

1、template中:

<template>
 <div class="code" @click="refreshCode">
  <s-identify :identifyCode="identifyCode"></s-identify>
 </div>
</template>

2、 data中:

data() {
 return {
   identifyCode: "",
   identifyCodes: "",
 }
},

3、methods中:

methods: {
  // 生成随机数
  randomNum(min, max) {
    max = max + 1
    return Math.floor(Math.random() * (max - min) + min);
  },
  // 更新验证码
  refreshCode() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
    console.log('当前验证码==',this.identifyCode);
  },
  // 随机生成验证码字符串
  makeCode(data, len) {
    for (let i = 0; i < len; i++) {
      this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes)]
    }
  },
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 #Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 #Vue.js
vue实现简易的双向数据绑定
Dec 29 #Vue.js
vue中配置scss全局变量的步骤
Dec 28 #Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 #Vue.js
Vue仿百度搜索功能
Dec 28 #Vue.js
vue中watch的用法汇总
Dec 28 #Vue.js
You might like
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
js单词形式的运算符
2014/05/06 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python实现音乐下载的统计
2018/06/20 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
python脚本开机自启的实现方法
2019/06/28 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
感恩节活动方案
2014/01/27 职场文书
周年庆促销方案
2014/03/15 职场文书
绿色环保标语
2014/06/12 职场文书
初中作文评语集锦
2014/12/25 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Go中的条件语句Switch示例详解
2021/08/23 Golang