vue3+elementplus前端生成圖片驗(yàn)證碼完整代碼舉例
1、安裝
使用npm i identify --save 或者 yarn add identify --save
2、新建vue組件components/identify/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, default: 40 }, lineColorMax: { type: Number, default: 180 }, dotColorMin: { type: Number, default: 0 }, dotColorMax: { type: Number, default: 255 }, contentWidth: { type: Number, default: 112 }, contentHeight: { type: Number, default: 40 } }, methods: { // 生成一個(gè)隨機(jī)數(shù) randomNum (min, max) { return Math.floor(Math.random() * (max - min) + min) }, // 生成一個(gè)隨機(jī)的顏色 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.getElementById('s-canvas') var 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' 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) // 修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度 ctx.translate(x, y) ctx.rotate(deg * Math.PI / 270) ctx.fillText(txt, 0, 0) // 恢復(fù)坐標(biāo)原點(diǎn)和旋轉(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) { // 繪制干擾點(diǎn) 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='less' scoped> .s-canvas { height: 38px; cursor: pointer; } .s-canvas canvas{ margin-top: 1px; margin-left: 8px; } </style>
3、一般是登錄頁面用到這個(gè),在你的登錄頁面的from表單的相應(yīng)位置加上填寫驗(yàn)證碼的html
<el-form-item prop="verifycode"> <el-input v-model="user.verifycode" placeholder="請(qǐng)輸入驗(yàn)證碼" class="identifyinput"> </el-input> </el-form-item> <el-form-item> <div class="identifybox"> <div @click="refreshCode"> <s-identify :identifyCode="identifyCode"></s-identify> </div> <el-button @click="refreshCode" type='text' class="textbtn">看不清,換一張</el-button> </div> </el-form-item>
4、在script下引入組件,并編寫方法
<script> // 引入圖片驗(yàn)證碼組件 import SIdentify from '@/components/identify' export default { components: { SIdentify }, data() { /* 自定義驗(yàn)證碼規(guī)則 */ const validateVerifycode = (rule, value, callback) => { if (value === '') { callback(new Error('請(qǐng)輸入驗(yàn)證碼')) } else if (value !== this.identifyCode) { callback(new Error('驗(yàn)證碼不正確!')) } else { callback() } } return { identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz', identifyCode: '', rules: { verifycode: [{ required: true, trigger: 'blur', validator: validateVerifycode,}] } } }, mounted(){ this.identifyCode=''; this.makeCode(this.identifyCodes,4); history.pushState(null, null, document.URL); if (window.history && window.history.pushState) { $(window).on('popstate', function (){ window.history.pushState('forward', null, ''); window.history.forward(1); }); window.history.pushState('forward', null, ''); //在IE中必須得有這兩行 window.history.forward(1); } }, methods: { randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min) }, // 切換驗(yàn)證碼 refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }, // 生成隨機(jī)驗(yàn)證碼 makeCode(o, l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0) ] } }, } } </script>
5、效果
總結(jié)
到此這篇關(guān)于vue3+elementplus前端生成圖片驗(yàn)證碼的文章就介紹到這了,更多相關(guān)vue3+elementplus生成圖片驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue3+Vite+ElementPlus構(gòu)建學(xué)習(xí)筆記
- Vue3通過JSON渲染ElementPlus表單的流程步驟
- Vue3+ElementPlus封裝圖片空間組件的門面實(shí)例
- vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill詳細(xì)教程
- vue3基于elementplus 簡單實(shí)現(xiàn)表格二次封裝過程
- vue3+elementplus 樹節(jié)點(diǎn)過濾功能實(shí)現(xiàn)
- 如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑
- Vue3 + ElementPlus動(dòng)態(tài)合并數(shù)據(jù)相同的單元格的完整代碼
相關(guān)文章
如何用vue3+Element?plus實(shí)現(xiàn)一個(gè)完整登錄功能
要實(shí)現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫實(shí)現(xiàn)一個(gè)完整的登錄功能,文中提供了詳細(xì)的代碼示例,需要的朋友可以參考下2023-10-10vue3+vite+ts?通過svg-sprite-loader?插件使用自定義圖標(biāo)的詳細(xì)步驟
這篇文章主要介紹了vue3+vite+ts通過svg-sprite-loader插件使用自定義圖標(biāo),本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05Vue.js響應(yīng)式數(shù)據(jù)的簡單實(shí)現(xiàn)方法(一看就會(huì))
Vue最巧妙的特性之一是其響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue.js響應(yīng)式數(shù)據(jù)的簡單實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03vue computed計(jì)算屬性顯示undefined的解決
這篇文章主要介紹了vue computed計(jì)算屬性顯示undefined的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07vue.prototype和vue.use的區(qū)別和注意點(diǎn)小結(jié)
這篇文章主要介紹了vue.prototype和vue.use的區(qū)別和注意點(diǎn)小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04