vue随机验证码组件的封装实现


Posted in Javascript onFebruary 19, 2020

本文实例为大家分享了vue随机验证码组件的具体代码,供大家参考,具体内容如下

由于工作需要自己做了一个验证码组件,灵活性不高,但是可以用,代码也不太复杂

<template>
 <div style="display: flex;justify-content: start;align-items: center;border-radius: 4px">
 <canvas style="" :width="contentWidth" :height="contentHeight" id="cav" @click="next()"></canvas>
 </div>
</template>

<script>
// import num from './components/cc'
export default {
 name: 'verificationCode',
 props: {
 fontSize: {
 type: Number,
 default: 20
 },
 contentWidth: {
 type: Number,
 default: 100
 },
 contentHeight: {
 type: Number,
 default: 40
 },
 verification: {
 type: String
 },
 refreshCode: {
 type: Boolean
 }
 },
 watch: {
 verification: function (newVal) {
 if (newVal.toLowerCase() === this.identify.toLowerCase()) {
 this.$emit('handleIdentify', true)
 } else {
 this.$emit('handleIdentify', false)
 }
 },
 refreshCode: function (newVal) {
 this.draw()
 }
 },
 mounted () {
 this.draw()
 },
 data () {
 return {
 identify: '',
 letter: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
 }
 },
 methods: {
 draw () {
 let self = this
 let text = this.randomNum()
 this.identify = text.join('')
 let ctx = document.getElementById('cav')
 let cav = ctx.getContext('2d')
 cav.clearRect(0, 0, self.contentWidth, self.contentHeight)
 let w = ctx.width
 let h = ctx.height
 cav.textBaseline = 'bottom'
 self.drawText(cav, text[0], 10, 10, self.randomDeg(0, 0.1), 20)
 self.drawText(cav, text[1], 20, 10, self.randomDeg(0, 0.1))
 self.drawText(cav, text[2], 25, 10, self.randomDeg(0, 0.1))
 self.drawText(cav, text[3], 30, 10, self.randomDeg(0, 0.1))
 let i
 for (i = 0; i < 3; i++) {
 self.drawLine(cav, self.randomDeg(0, 0.3 * w, 1), self.randomDeg(0, h, 1), self.randomDeg(0, w, 1), self.randomDeg(0, h, 1), self.randomDeg(0.8 * w, w, 1), self.randomDeg(0, h, 1))
 }
 },
 drawText (cav, text, x1, y1, route) {
 cav.beginPath()
 cav.fillStyle = '#ffe9db'
 cav.font = this.fontSize + 'px' + ' ' + '黑体'
 cav.translate(x1, y1)
 cav.rotate(Math.PI * route)
 cav.fillText(text, x1, y1)
 cav.fill()
 cav.rotate(-Math.PI * route)
 cav.translate(-(x1), -(y1))
 },
 drawLine (cav, x1, y1, x2, y2, x3, y3) {
 cav.beginPath()
 cav.strokeStyle = 'rgb(155, 204, 237)'
 cav.bezierCurveTo(x1, y1, x2, y2, x3, y3)
 cav.stroke()
 },
 randomNum () { // 生成随机字
 let i
 let letter = this.letter
 let text = []
 for (i = 0; i < 4; i++) {
 text.push(letter[Math.floor(Math.random() * 36)])
 }
 return text
 },
 randomDeg (min, max, f) { // 设置文字倾斜角度
 f = undefined ? Math.random() > 0.5 ? 1 : -1 : 1
 return f * (Math.random() * (max - min) + min)
 },
 next () {
 this.draw()
 }
 }
}
</script>

<style scoped>

</style>

样式什么的自己可以调一调,效果如下:

vue随机验证码组件的封装实现

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
原生js实现验证码功能
Mar 16 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 #Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 #Javascript
Vue.js仿Select下拉框效果
Feb 18 #Javascript
JavaScript中的惰性载入函数及优势
Feb 18 #Javascript
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
vue微信分享插件使用方法详解
Feb 18 #Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
You might like
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
教大家制作简单的php日历
2015/11/17 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
node网页分段渲染详解
2016/09/05 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
JS如何生成动态列表
2020/09/22 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
法学毕业生自我鉴定
2014/01/31 职场文书
历史学专业求职信
2014/06/19 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书