您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue項(xiàng)目中如何實(shí)現(xiàn)一個(gè)驗(yàn)證碼切換功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
具體內(nèi)容如下
父組件
<template> <div class="login"> <van-field center clearable label="驗(yàn)證碼" placeholder="輸入驗(yàn)證碼" v-model="verify" > <template #button> <vueImgVerify ref="verifyRef" /> </template> </van-field> <span >點(diǎn)擊更換驗(yàn)證碼</span> <van-button round block type="info" native-type="submit" @click="btn"> 提交 </van-button> </div> </template> <script> // ref 接受一個(gè)內(nèi)部值并返回一個(gè)響應(yīng)式且可變的 ref 對(duì)象。ref 對(duì)象具有指向內(nèi)部值的單個(gè) property .value。 import { reactive, ref, toRefs } from "vue"; import vueImgVerify from "../views/lv.vue"; // 引入的子組件 import { Toast } from "vant"; export default { components: { vueImgVerify, }, setup() { const verifyRef = ref(null); const state = reactive({ verify: "", }); const btn = function() { // console.log(verifyRef.value.imgCode); // console.log(state.verify); if (verifyRef.value.imgCode === state.verify) { Toast.success("驗(yàn)證碼輸入正確"); } else { Toast.fail("驗(yàn)證碼輸入錯(cuò)誤"); } }; return { ...toRefs(state), btn, verifyRef, }; }, }; </script> <style lang="less"></style>
reactive, ref, toRefs 可以去官網(wǎng)查看各 代表的含義 官網(wǎng)
子組件 封裝組件,即用即粘貼
<template> <div class="img-verify"> <canvas ref="verify" :width="width" :height="height" @click="handleDraw"></canvas> </div> </template> <script type="text/ecmascript-6"> import { reactive, onMounted, ref, toRefs } from 'vue' export default { setup() { const verify = ref(null) const state = reactive({ pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', // 字符串 width: 120, height: 40, imgCode: '' }) onMounted(() => { // 初始化繪制圖片驗(yàn)證碼 state.imgCode = draw() }) // 點(diǎn)擊圖片重新繪制 const handleDraw = () => { state.imgCode = draw() } // 隨機(jī)數(shù) const randomNum = (min, max) => { return parseInt(Math.random() * (max - min) + min) } // 隨機(jī)顏色 const randomColor = (min, max) => { const r = randomNum(min, max) const g = randomNum(min, max) const b = randomNum(min, max) return `rgb(${r},${g},$)` } // 繪制圖片 const draw = () => { // 3.填充背景顏色,背景顏色要淺一點(diǎn) const ctx = verify.value.getContext('2d') // 填充顏色 ctx.fillStyle = randomColor(180, 230) // 填充的位置 ctx.fillRect(0, 0, state.width, state.height) // 定義paramText let imgCode = '' // 4.隨機(jī)產(chǎn)生字符串,并且隨機(jī)旋轉(zhuǎn) for (let i = 0; i < 4; i++) { // 隨機(jī)的四個(gè)字 const text = state.pool[randomNum(0, state.pool.length)] imgCode += text // 隨機(jī)的字體大小 const fontSize = randomNum(18, 40) // 字體隨機(jī)的旋轉(zhuǎn)角度 const deg = randomNum(-30, 30) /* * 繪制文字并讓四個(gè)文字在不同的位置顯示的思路 : * 1、定義字體 * 2、定義對(duì)齊方式 * 3、填充不同的顏色 * 4、保存當(dāng)前的狀態(tài)(以防止以上的狀態(tài)受影響) * 5、平移translate() * 6、旋轉(zhuǎn) rotate() * 7、填充文字 * 8、restore出棧 * */ ctx.font = fontSize + 'px Simhei' ctx.textBaseline = 'top' ctx.fillStyle = randomColor(80, 150) /* * save() 方法把當(dāng)前狀態(tài)的一份拷貝壓入到一個(gè)保存圖像狀態(tài)的棧中。 * 這就允許您臨時(shí)地改變圖像狀態(tài), * 然后,通過(guò)調(diào)用 restore() 來(lái)恢復(fù)以前的值。 * save是入棧,restore是出棧。 * 用來(lái)保存Canvas的狀態(tài)。save之后,可以調(diào)用Canvas的平移、放縮、旋轉(zhuǎn)、錯(cuò)切、裁剪等操作。 restore:用來(lái)恢復(fù)Canvas之前保存的狀態(tài)。防止save后對(duì)Canvas執(zhí)行的操作對(duì)后續(xù)的繪制有影響。 * * */ ctx.save() ctx.translate(30 * i + 15, 15) ctx.rotate((deg * Math.PI) / 180) // fillText() 方法在畫布上繪制填色的文本。文本的默認(rèn)顏色是黑色。 // 請(qǐng)使用 font 屬性來(lái)定義字體和字號(hào),并使用 fillStyle 屬性以另一種顏色/漸變來(lái)渲染文本。 // context.fillText(text,x,y,maxWidth); ctx.fillText(text, -15 + 5, -15) ctx.restore() } // 5.隨機(jī)產(chǎn)生5條干擾線,干擾線的顏色要淺一點(diǎn) for (let i = 0; i < 5; i++) { ctx.beginPath() ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height)) ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height)) ctx.strokeStyle = randomColor(180, 230) ctx.closePath() ctx.stroke() } // 6.隨機(jī)產(chǎn)生40個(gè)干擾的小點(diǎn) for (let i = 0; i < 40; i++) { ctx.beginPath() ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI) ctx.closePath() ctx.fillStyle = randomColor(150, 200) ctx.fill() } return imgCode } return { ...toRefs(state), verify, handleDraw } } } </script> <style type="text/css"> .img-verify canvas { cursor: pointer; } </style>
關(guān)于vue項(xiàng)目中如何實(shí)現(xiàn)一個(gè)驗(yàn)證碼切換功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。