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+iview实现文件上传
Nov 17 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 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 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
js实现双色球效果
2020/08/02 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python中的随机函数小结
2018/01/27 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
python怎么自定义捕获错误
2020/06/29 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年租房协议书范本
2014/10/30 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书