vue实现登录页面的验证码以及验证过程解析(面向新手)
1星 24 浏览量
2020-10-16
14:41:24
上传
评论 2
收藏 50KB PDF 举报 
vue实现登录页面的验证码以及验证过程解析实现登录页面的验证码以及验证过程解析(面向新手面向新手)
主要介绍了vue实现登录页面的验证码以及验证过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者
工作具有一定的参考学习价值,需要的朋友可以参考下
做成之后就
是这个样子
接下来上代码
创建一个组件。显示验证码图片
<template>
<div class="s-canvas">
<canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
</div>
</template>
<script>
export default{
name: 'SIdentify',
props: {
identifyCode: { // 默认注册码
type: String,
default: '1234'
},
fontSizeMin: { // 字体最小值
type: Number,
default: 25
},
fontSizeMax: { // 字体最大值
type: Number,
default: 35
},
backgroundColorMin: { // 验证码图片背景色最小值
type: Number,
default: 200
},
backgroundColorMax: { // 验证码图片背景色最大值
type: Number,
default: 220
},
dotColorMin: { // 背景干扰点最小值
type: Number,
default: 60
},
dotColorMax: { // 背景干扰点最大值
type: Number,
default: 120
},
contentWidth: { // 容器宽度
type: Number,
default: 90
},
contentHeight: { // 容器高度
type: Number,
default: 38
}
},
methods: {
// 生成一个随机数
randomNum (min, max) {
return Math.floor(Math.random() * (max - min) + min)
},
// 生成一个随机的颜色
randomColor (min, max) {
let r = this.randomNum(min, max)
let g = this.randomNum(min, max)
let b = this.randomNum(min, max)
return 'rgb(' + r + ',' + g + ',' + b + ')'
},
drawPic () {
let canvas = document.getElementById('s-canvas')
let ctx = canvas.getContext('2d')
ctx.textBaseline = 'bottom'
评论1
最新资源