vue實現圖形驗證碼登入
阿新 • • 發佈:2021-04-28
本文例項為大家分享了vue實現圖形驗證碼登入的具體程式碼,供大家參考,具體內容如下
1、效果圖
2、在components下面新建檔案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: 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,lineColorMax: { type: Number,dotColorMin: { type: Number,default: 0 },dotColorMax: { type: Number,default: 255 },contentWidth: { type: Number,default: 112 },contentHeight:www.cppcns.com{ type: Number,default: 40 } },methods: { // 生成一個隨機數 randomNum (min,max) { return Math.floor(Math.random() * (max - min) + min) },// 生成一個隨機的顏色 randomColor (min,max) { var r = this.randomNum(min,max) var g = this.randomNum(min,max) var b = this.randomNum(min,max) return 'rgb(' + r + ',' + g + ',' + b + ')' },drawPic () { var canvas = document.getElemenkNAIAglRtById('s-canvas') var ctx = canvas.getContext('2d') ctx.textBaseline = 'bottom' // 繪製背景 ctx.fillStyle = this.randomColor( this.backgroundColorMin,this.backgroundColorMax ) ctx.fillRect(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' var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) var y = this.randomNum(this.fontSizeMax,this.contentHeight - 5) var deg = this.randomNum(-30,30) // 修改座標原點和旋轉角度 ctx.translate(x,y) ctx.rotate(deg * Math.PI / 270) ctx.fillText(txt,0) // 恢復座標原點和旋轉角度 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.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.contentHeight),1,2 * Math.PI ) ctx.fill() } } },watch: { identifyCode () { this.drawPic() } },mounted () { this.drawPic() } } </script> <style lang='scss' scoped> .s-canvas { height: 38px; } .s-canvas canvas{ margin-top: 1px; margin-left: 8px; } </style>
3、頁面引入
<script> import SIdentify from '../../components/identify' export default { components: { SIdentify } } data() { // 驗證碼自定義驗證規則 const validateVerifycode = (rule,value,callback) => { const newVal = value.toLowerCase() const identifyStr = this.identifyCode.toLow程式設計客棧erCase() if (newVal === '') { callback(new Error('請輸入驗證碼')) } else if (newVal !== identifyStr) { console.log('validateVerifycode:',value) callback(new Error('驗證碼不正確!')) } else { callback() } } return { identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',identifyCode: '',ruleForm: { userName: '',password: '',verifycode: '' },rules: { verifycode: [ { required: true,trigger: 'blur',validator: validateVerifycode } ] } } } </script>
4、html
<el-form-item prop="verifycode">kNAIAglR; <div style="display:flex"> <el-input v-model="ruleForm.verifycode" placeholder="請輸入驗證碼" @keyup.enter.native="login('ruleForm')" ></el-input> <span @click="refreshCode" ><s-identify :identifyCode="identifyCode"></s-identify ></span> </div> </el-form-item>
5、mounted
mounted() { // 驗證碼初始化 this.identifyCode = '' this.makeCode(this.identifyCodes,4) }
6、methods
methods: { // 生成隨機數 randomNum(min,// 切換驗證碼 refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes,4) },// 生成四位隨機驗證碼 makeCode(o,l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ this.randomNum(0,this.identifyCodes.length) ] } } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。