Vue實(shí)現(xiàn)驗(yàn)證碼登錄的方法實(shí)例
更新時(shí)間：2022年03月23日 11:27:22 作者：偷吃零食被揍
最近在自己寫頁(yè)面,然后寫登錄注冊(cè)UI的時(shí)候需要一個(gè)驗(yàn)證碼組件,去搜一下沒找到什么合適的,于是自己寫一個(gè),這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)驗(yàn)證碼登錄的相關(guān)資料,需要的朋友可以參考下
效果展示
第一步：創(chuàng)建驗(yàn)證碼組件
這里是組件的代碼，可以自行命名文件名，我這里命名為SIdentify.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: 30
},
backgroundColorMin: {
type: Number,
default: 255
},
backgroundColorMax: {
type: Number,
default: 255
},
colorMin: {
type: Number,
default: 0
},
colorMax: {
type: Number,
default: 160
},
lineColorMin: {
type: Number,
default: 100
},lineColorMax: {
type: Number,
default: 255
},
dotColorMin: {
type: Number,
default: 0
},
dotColorMax: {
type: Number,
default: 255
},
contentWidth: {
type: Number,
default: 112
},
contentHeight: {
type: Number,
default: 31
}
},
methods: {
// 生成一個(gè)隨機(jī)數(shù)
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min)
},
// 生成一個(gè)隨機(jī)的顏色
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'
// 繪制背景
ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
// 繪制文字
for (let i = 0; i < this.identifyCode.length; i++) {
this.drawText(ctx, this.identifyCode[i], i)
}
this.drawLine(ctx)
this.drawDot(ctx)
},
drawText(ctx, txt, i) {
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
var deg = this.randomNum(-45, 45)
// 修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
ctx.translate(x, y)
ctx.rotate(deg * Math.PI / 180)
ctx.fillText(txt, 0, 0)
// 恢復(fù)坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
ctx.rotate(-deg * Math.PI / 180)
ctx.translate(-x, -y)
},
drawLine(ctx) {
// 繪制干擾線
for (let i = 0; i < 5; i++) {
ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
ctx.beginPath()
ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
ctx.stroke()
}
},
drawDot(ctx) {
// 繪制干擾點(diǎn)
for (let i = 0; i < 80; i++) {
ctx.fillStyle = this.randomColor(0, 255)
ctx.beginPath()
ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
ctx.fill()
}
}
},
watch: {
identifyCode() {
this.drawPic()
}
},
mounted() {
this.drawPic()
}
}
</script>
<style scoped>
.s-canvas {
height: 38px;
}
.s-canvas canvas{
margin-top: 1px;
margin-left: 8px;
}
</style>第二步：引入驗(yàn)證碼組件并注冊(cè)使用
這里data里面的identifyCode的值就是所生成的驗(yàn)證碼的值，可以通過該碼自行發(fā)揮邏輯操作，SIdentify組件其實(shí)只是為了顯示驗(yàn)證碼圖片而已，所以不用該組件還可以做成偽手機(jī)驗(yàn)證碼登錄
<template>
<div>
<SIdentify:identifyCode="identifyCode" >
</SIdentify>
</div>
</template>
// 引入登錄驗(yàn)證組件
import SIdentify from "@/components/SIdentify";
<script>
export default {
name: "SIdentify",
components: { SIdentify },
data(){
return {
identifyCode: "", //密碼登錄圖形驗(yàn)證碼
identifyCodes: "1234567890abcdefghizklmnopqrstuvwxyz", //生成圖形驗(yàn)證碼的依據(jù)
}
},
methods:{
// 刷新驗(yàn)證碼
refreshIdentifyCode() {
this.identifyCode = "";
this.makeIdentifyCode(4);
},
// 生成4位數(shù)的隨機(jī)驗(yàn)證碼
makeIdentifyCode(l) {
for (let i = 0; i < l; i++) {
this.identifyCode +=
this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
}
},
// 生成單個(gè)驗(yàn)證碼
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
},
mounted() {
// 初始化驗(yàn)證碼
this.identifyCode = "";
this.makeIdentifyCode(4);
},
}
</script>總結(jié)
到此這篇關(guān)于Vue實(shí)現(xiàn)驗(yàn)證碼登錄的文章就介紹到這了,更多相關(guān)Vue驗(yàn)證碼登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限
本文主要介紹了Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue-admin-template?報(bào)Uncaught?(in?promise)?error問題及解決
這篇文章主要介紹了Vue-admin-template?報(bào)Uncaught?(in?promise)?error問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內(nèi)部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this（不需要實(shí)例化的組件）,這篇文章主要給大家介紹了關(guān)于Vue.js函數(shù)式組件的相關(guān)資料,需要的朋友可以參考下2021-10-10
Vue插槽,是學(xué)習(xí)vue中必不可少的一節(jié),越來越發(fā)現(xiàn)插槽的好用,而過濾數(shù)據(jù)也是我們?nèi)粘ｉ_發(fā)中必然會(huì)用到的,這篇文章主要給大家介紹了關(guān)于Vue插槽和過濾器的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
這篇文章主要介紹了 Vue 3.0 的組裝式 API的部分資料，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-08-08
完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問題
下面小編就為大家分享一篇完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue登錄路由驗(yàn)證的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個(gè)v-model實(shí)現(xiàn)這個(gè)數(shù)據(jù)的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個(gè)v-model指令結(jié)合使用，這篇文章主要介紹了vue的表單數(shù)據(jù)收集，基本指令和自定義指令,需要的朋友可以參考下2023-01-01
Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問題
這篇文章主要介紹了Vue使用vm.$set()解決對(duì)象新增屬性不能響應(yīng)的問題,為了解決這個(gè)問題，Vue提供了一個(gè)特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法，需要的朋友可以參考下2023-05-05
vue中 router.beforeEach() 的用法示例代碼
導(dǎo)航守衛(wèi)主要是通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,本文通過示例代碼講解vue中 router.beforeEach() 的用法,感興趣的朋友跟隨小編一起看看吧2023-12-12