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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
javascript实现日期按月份加减
May 15 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
layui弹出层效果实现代码
May 19 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
vue实现评价星星功能
Jun 30 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
python实现的文件同步服务器实例
2015/06/02 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python打开windows应用程序的实例
2019/06/28 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python接口自动化测试的实现
2020/08/28 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
机械专业应届生求职信
2013/09/21 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
单位委托函范文
2015/01/29 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript