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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue使用element-ui按需引入
May 20 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
Sony CFR 320 修复改造
2020/03/14 无线电
学习php分页代码实例
2013/10/24 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
文秘专业应届生求职信范文
2013/11/14 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
批评与自我批评范文
2014/10/15 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
指导老师鉴定意见
2015/06/05 职场文书
班主任寄语2016
2015/12/04 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
mysql sock 文件解析及作用讲解
2022/07/15 MySQL