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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
详解Vue的mixin策略
Nov 19 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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写的小东西
2006/12/06 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
javascript连续赋值问题
2015/07/08 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
市场开发与营销专业求职信
2013/12/31 职场文书
大学三年计划书范文
2014/04/30 职场文书
国贸专业求职信
2014/06/28 职场文书
医生个人年终总结
2015/02/28 职场文书
消防宣传标语大全
2015/08/03 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
Nginx配置Https安全认证的实现
2021/05/26 Servers
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技