vue實現(xiàn)登錄時圖形驗證碼

更新時間：2022年03月04日 16:19:59 作者：別搞花里胡哨的

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)登錄時圖形驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)登錄時圖形驗證碼的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

點擊圖案可以切換字符

1.新建 Identify.vue 組件

<template>
? <div>
? <canvas
? ? ? id="s-canvas"
? ? ? :width="contentWidth"
? ? ? :height="contentHeight"></canvas>
? </div>
</template>

<script>
export default {
? name: "identify",
? props: {
? ? identifyCode: {
? ? ? type: String,
? ? ? default: ''
? ? },
? ? fontSizeMin: {
? ? ? type: Number,
? ? ? default: 28
? ? },
? ? fontSizeMax: {
? ? ? type: Number,
? ? ? default: 40
? ? },
? ? backgroundColorMin: {
? ? ? type: Number,
? ? ? default: 180
? ? },
? ? backgroundColorMax: {
? ? ? type: Number,
? ? ? default: 240
? ? },
? ? colorMin: {
? ? ? type: Number,
? ? ? default: 50
? ? },
? ? colorMax: {
? ? ? type: Number,
? ? ? default: 160
? ? },
? ? lineColorMin: {
? ? ? type: Number,
? ? ? default: 40
? ? },
? ? lineColorMax: {
? ? ? type: Number,
? ? ? default: 180
? ? },
? ? dotColorMin: {
? ? ? type: Number,
? ? ? default: 0
? ? },
? ? dotColorMax: {
? ? ? type: Number,
? ? ? default: 255
? ? },
? ? contentWidth: {
? ? ? type: Number,
? ? ? default: 130
? ? },
? ? contentHeight: {
? ? ? type: Number,
? ? ? default: 40
? ? }
? },
? methods:{
? ? // 生成一個隨機數(shù)
? ? 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'
? ? ? // 繪制背景
? ? ? 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)
? ? ? let deg = this.randomNum(-30, 30)
? ? ? // 修改坐標(biāo)原點和旋轉(zhuǎn)角度
? ? ? ctx.translate(x, y)
? ? ? ctx.rotate(deg * Math.PI / 270)
? ? ? ctx.fillText(txt, 0, 0)
? ? ? // 恢復(fù)坐標(biāo)原點和旋轉(zhuǎn)角度
? ? ? ctx.rotate(-deg * Math.PI / 270)
? ? ? ctx.translate(-x, -y)
? ? },
? ? drawLine (ctx) {
? ? ? // 繪制干擾線
? ? ? for (let i = 0; i < 2; 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) {
? ? ? // 繪制干擾點
? ? ? for (let i = 0; i < 20; 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 lang="scss" scoped>
#s-canvas {
? height: 38px;
}
</style>

2.在父組件 index.vue注冊使用

<template>
?? ?<div @click="refreshCode" style="cursor: pointer;">
? ? ? ? <Identify :identifyCode="identifyCode" ></Identify>
? ? </div>
</template>

<script>
import Identify from '@/components/test/identify'
export default {
? name: "index",
? components:{
? ?Identify?
? },
? data(){
? ?? ?return {
?? ??? ? identifyCode: '',
? ? ? // 驗證碼規(guī)則
? ? ? identifyCodes: '123456789ABCDEFGHGKMNPQRSTUVWXYZ',
?? ?}?
? },
? methods:{
?? ?// 切換驗證碼
? ? refreshCode() {
? ? ? this.identifyCode = ''
? ? ? this.makeCode(this.identifyCodes, 4)
? ? ? console.log(this.identifyCode)
? ? },
? ? // 生成隨機驗證碼
? ? makeCode(o, l) {
? ? ? for (let i = 0; i<l; i++) {
? ? ? ? this.identifyCode += this.identifyCodes[
? ? ? ? ? ? Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
? ? ? ? ? ? ]
? ? ? }
?? ?},
?? ?mounted() {
? ? ?? ?this.refreshCode()
? }
}
</script>

<style scoped>

</style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: