vue驗證碼組件應(yīng)用實例
代碼如下:
<template> <div class="join_formitem"> <label class="enquiry">驗證碼<span>:</span></label> <div class="captcha"> <input type="text" placeholder="請輸入驗證碼" class="verification_input" v-model="picVerification" /> <input type="button" @click="createdCode" class="verification" v-model="checkCode" /> </div> </div> </template> <script> export default { data(){ return{ code:'', checkCode:'', picVerification:'' //..驗證碼圖片 } }, created(){ this.createdCode() }, methods: { // 圖片驗證碼 createdCode(){ // 先清空驗證碼輸入 this.code = "" this.checkCode = "" this.picVerification = "" // 驗證碼長度 const codeLength = 4 // 隨機數(shù) const random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z') for(let i = 0;i < codeLength;i++){ // 取得隨機數(shù)的索引(0~35) let index = Math.floor(Math.random() * 36) // 根據(jù)索引取得隨機數(shù)加到code上 this.code += random[index] } // 把code值賦給驗證碼 this.checkCode = this.code } } } </script> <style> .verification_input{ font-family: 'Exo 2',sans-serif; border: 1px solid #fff; color: black; outline: none; border-radius: 12px; letter-spacing: 1px; font-size: 17px; font-weight: normal; background-color: rgba(82,56,76,.15); padding: 5px 0 5px 10px; margin-left: 30px; height: 30px; margin-top: 25px; border: 1px solid #e6e6e6; } .verification{ border-radius: 12px; width: 100px; letter-spacing: 5px; margin-left: 50px; height: 40px; transform: translate(-15px,0); } .captcha{ height:50px; text-align: justify; } </style>
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
java程序員自己的圖片轉(zhuǎn)文字OCR識圖工具分享
這篇文章主要介紹了java程序員自己的圖片轉(zhuǎn)文字OCR識圖工具,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-11-11Java?多線程并發(fā)?ReentrantReadWriteLock詳情
這篇文章主要介紹了Java多線程并發(fā)ReentrantReadWriteLock詳情,ReentrantReadWriteLock可重入讀寫鎖。實際使用場景中,我們需要處理的操作本質(zhì)上是讀與寫,更多相關(guān)資料,感興趣的小伙伴可以參考一下下面文章內(nèi)容2022-06-06詳解Java如何實現(xiàn)在PDF中插入,替換或刪除圖像
圖文并茂的內(nèi)容往往讓人看起來更加舒服,如果只是文字內(nèi)容的累加,往往會使讀者產(chǎn)生視覺疲勞。搭配精美的文章配圖則會使文章內(nèi)容更加豐富。那我們要如何在PDF中插入、替換或刪除圖像呢?別擔心,今天為大家介紹一種高效便捷的方法2023-01-01Eureka源碼閱讀Client啟動入口注冊續(xù)約及定時任務(wù)
這篇文章主要為大家介紹了Eureka源碼閱讀Client啟動入口注冊續(xù)約及定時任務(wù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10新手小白入門必學(xué)JAVA面向?qū)ο笾鄳B(tài)
說到多態(tài),一定離不開其它兩大特性:封裝和繼承,下面這篇文章主要給大家介紹了關(guān)于新手小白入門必學(xué)JAVA面向?qū)ο笾鄳B(tài)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02SpringBoot結(jié)合FreeMarker視圖渲染的實現(xiàn)
FreeMarker它允許開發(fā)人員使用模板和數(shù)據(jù)來生成輸出文本,如HTML網(wǎng)頁、電子郵件、配置文件和源代碼等,本文主要介紹了SpringBoot結(jié)合FreeMarker視圖渲染的實現(xiàn),感興趣的可以了解一下2024-03-03詳談jvm--Java中init和clinit的區(qū)別
下面小編就為大家?guī)硪黄斦刯vm--Java中init和clinit的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10如何在Spring中使用編碼方式動態(tài)配置Bean詳解
這篇文章主要給大家介紹了關(guān)于如何在Spring中使用編碼方式動態(tài)配置Bean的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05