沐鳴登錄網站_Vue實現隨機驗證碼功能

3、methods中:,
,步驟1 創建一個名為identify.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: 35

},

// 字體最大值

fontSizeMax: {

type: Number,

default: 35

},

// 背景顏色色值最小值

backgroundColorMin: {

type: Number,

default: 180

},

// 背景顏色色值最大值

backgroundColorMax: {

type: Number,

default: 240

},

// 字體顏色色值最小值

colorMin: {

type: Number,

default: 50

},

// 字體顏色色值最大值

colorMax: {

type: Number,

default: 160

},

// 干擾線顏色色值最小值

lineColorMin: {

type: Number,

default: 100

},

// 干擾線顏色色值最大值

lineColorMax: {

type: Number,

default: 200

},

// 干擾點顏色色值最小值

dotColorMin: {

type: Number,

default: 0

},

// 干擾點顏色色值最大值

dotColorMax: {

type: Number,

default: 255

},

// 畫布寬度

contentWidth: {

type: Number,

default: 120

},

// 畫布高度

contentHeight: {

type: Number,

default: 40

}

},

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’

// 繪製背景

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)

// 修改坐標原點和旋轉角度

ctx.translate(x, y)

ctx.rotate(deg * Math.PI / 180)

ctx.fillText(txt, 0, 0)

// 恢復坐標原點和旋轉角度

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) {

// 繪製干擾點

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>,鏈接: http://www.fly63.com/article/detial/10027,步驟2 在子組件中進行註冊和引用 ,步驟3 在主頁面中使用子組件

1、template中:,2、 data中:,3、methods中: