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 的 v-model用法实例
Nov 23 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue postcss-px2rem 自适应布局
May 15 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 全角转半角实现代码
2010/05/16 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
会计实习自我鉴定
2013/12/04 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
六查六看心得体会
2014/10/14 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书