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正确获取元素样式详解
Aug 07 Javascript
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
javascript中this指向详解
Apr 23 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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中explode与split的区别介绍
2012/10/03 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php中define用法实例
2015/07/30 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
Python-嵌套列表list的全面解析
2016/06/08 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
Python简单实现区域生长方式
2020/01/16 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
大学生找工作推荐信范文
2013/11/28 职场文书
经典团队口号大全
2014/06/21 职场文书
岗位说明书标准范本
2014/07/30 职场文书
聚会通知怎么写
2015/04/23 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
python 如何在list中找Topk的数值和索引
2021/05/20 Python