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打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue 实现上传组件
May 31 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
twig模板常用语句实例小结
2016/02/04 PHP
php文件上传类完整实例
2016/05/14 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
js倒计时小程序
2013/11/05 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
Python实现基本线性数据结构
2016/08/22 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python 求定积分和不定积分示例
2019/11/20 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
校长先进事迹材料
2014/02/01 职场文书
2014年工程工作总结
2014/11/25 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
公司员工体检通知
2015/04/21 职场文书
功夫熊猫观后感
2015/06/10 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
学生病假条范文
2015/08/17 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书