VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能
更新時(shí)間：2020年11月18日 14:30:51 作者：ajuan
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了VUE實(shí)現(xiàn)圖片驗(yàn)證碼的具體代碼，供大家參考，具體內(nèi)容如下
1. 概述
1.1 說明
在開發(fā)過程中，有時(shí)候需要使用圖片驗(yàn)證碼進(jìn)行增加安全強(qiáng)度，在點(diǎn)擊圖片時(shí)更新新的圖片驗(yàn)證碼，記錄此功能，以便后期使用。
2. 示例
2.1 vue示例代碼
<template>
<el-form style="width: 400px;">
<el-form-item style="height: 40px;margin-bottom: 20px;">
<el-input class="input" maxlength="8" placeholder="請輸入驗(yàn)證碼"></el-input>
<div class="divIdentifyingCode" @click="getIdentifyingCode(true)">
<img id="imgIdentifyingCode" style="height:40px; width: 100px; cursor: pointer;" alt="點(diǎn)擊更換"
title="點(diǎn)擊更換" />
</div>
</el-form-item>
</el-form>
</template>
<script>
export default {
methods: {
/**
* 窗口代碼
* @param {Boolean} bRefresh 是否刷新
*/
getIdentifyingCode: function (bRefresh) {
let identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode";
if (bRefresh) {
identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode?" + Math.random();
}
let objs = document.getElementById("imgIdentifyingCode");
objs.src = identifyCodeSrc;
},
}
}
</script>
<style>
.divIdentifyingCode {
position: absolute;
top: 0;
right: 0;
z-index: 5;
width: 102px; /*設(shè)置圖片顯示的寬*/
height: 40px; /*圖片顯示的高*/
background: #e2e2e2;
margin: 0;
}
</style>
注意：使用 Math.random() 來獲取新的驗(yàn)證碼，后臺支持使用接口獲取驗(yàn)證碼。
2.2 顯示
關(guān)于vue.js的學(xué)習(xí)教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue攔截器及請求封裝代碼,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式
這篇文章主要介紹了vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vue指令實(shí)現(xiàn)大屏元素分辨率適配詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要給大家介紹了關(guān)于Vuex中五個(gè)屬性以及使用的相關(guān)資料,Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動 tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說可以用 vue-draggable-plus 這個(gè)庫來實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01
今天小編就為大家分享一篇對vue中v-if的常見使用方法詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue.js中的全局錯(cuò)誤處理函數(shù)errorHandler用法
這篇文章主要介紹了Vue.js中的全局錯(cuò)誤處理函數(shù)errorHandler用法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex的簡單使用,需要的朋友可以參考下2018-02-02
Vue+Three加載glb文件報(bào)錯(cuò)問題及解決
當(dāng)使用Three.js加載GLB模型時(shí),遇到加載錯(cuò)誤常常是路徑問題,解決方案：1. 將GLB模型文件置于public目錄,避免打包時(shí)路徑編碼變化；2. 從node_modules的three庫中復(fù)制draco解碼器至public目錄；3. 確認(rèn)場景、攝像機(jī)和光源設(shè)置正確2024-10-10
vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解
這篇文章主要介紹了vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08