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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
Vue自定义指令使用方法详解
2017/08/21 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
详解flask入门模板引擎
2018/07/18 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
违反学校规定检讨书
2014/01/18 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
邀请书格式范文
2015/02/02 职场文书
行政主管岗位职责
2015/02/03 职场文书
小学生交通安全寄语
2015/02/27 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
Redis高可用集群redis-cluster详解
2022/03/20 Redis