vue專案中隨機生成驗證碼
阿新 • • 發佈:2020-10-13
效果:
過程:
1.下載identify外掛,命令:npm i identify
2.在你的components目錄新建一個vue元件,我的命名是:sIdentify.vue
3.在元件內把下面的程式碼copy過去
<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" /> </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 }, 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 } }, watch: { identifyCode() { this.drawPic() } }, mounted() { this.drawPic() }, methods: { // 生成一個隨機數 randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min) }, // 生成一個隨機的顏色 randomColor(min, max) { const r = this.randomNum(min, max) const g = this.randomNum(min, max) const b = this.randomNum(min, max) return 'rgb(' + r + ',' + g + ',' + b + ')' }, drawPic() { const canvas = document.getElementById('s-canvas') const 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' const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) const y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) var deg = this.randomNum(-30, 30) // 修改座標原點和旋轉角度 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 < 4; 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 < 30; 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() } } } } </script>
4.在你需要驗證碼的頁面引入元件並寫好方法:
<template> <div class="get-code" @click="refreshCode()"> <s-identify :identifyCode="identifyCode"></s-identify> </div> </template> <script> import SIdentify from "@/components/sIdentify.vue"; export default { components: { SIdentify }, data() { return { identifyCode: "", identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ",//隨便打的 } }, methods: { refreshCode() {// this.identifyCode = ""; this.makeCode(this.identifyCodes,4); }, randomNum (min, max) { max = max + 1 return Math.floor(Math.random() * (max - min) + min) }, // 隨機生成驗證碼字串 makeCode (data, len) { for (let i = 0; i < len; i++) { this.identifyCode += data[this.randomNum(0, data.length - 1)] } } } </script>
下載identify外掛,命令:npm i identify