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 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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+ajax 无刷新删除数据
2010/02/20 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
python中函数默认值使用注意点详解
2016/06/01 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
django站点管理详解
2017/12/12 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
strstr()的简单实现
2013/09/26 面试题
春节活动策划方案
2014/01/24 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
施工材料员岗位职责
2014/02/12 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
党委班子剖析材料
2014/08/21 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
关键在于落实心得体会
2014/09/03 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
机关保密工作承诺书
2015/05/04 职场文书
行政诉讼答辩状
2015/05/21 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
JavaScript分页组件使用方法详解
2021/07/26 Javascript
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android