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