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里的条件判断
Feb 27 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
python去除所有html标签的方法
2015/05/05 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
python3 简单实现组合设计模式
2020/07/02 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
开放系统互连参考模型
2016/06/29 面试题
期中考试反思800字
2014/05/01 职场文书
仰望星空观后感
2015/06/10 职场文书
六五普法心得体会2016
2016/01/21 职场文书
电工生产实习心得体会
2016/01/22 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
Python中tqdm的使用和例子
2022/09/23 Python