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 顯示
關于vue.js的學習教程，請大家點擊專題vue.js組件學習教程、Vue.js前端組件學習教程進行學習。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue-cli3 設置端口號(81)無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
這篇文章主要為大家詳細介紹了Vue2組件tree實現(xiàn)無限級樹形菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue不操作dom實現(xiàn)圖片輪播的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
從零開始在vue-cli4配置自適應vw布局的實現(xiàn)
這篇文章主要介紹了從零開始在vue-cli4配置自適應vw布局，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)開關按鈕拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
我在做項目的時候，有一個需求，在離開（跳轉(zhuǎn)或者關閉）購物車頁面或者刷新購物車頁面的時候向服務器提交一次購物車商品數(shù)量的變化。這篇文章主要介紹了vue監(jiān)聽頁面刷新和關閉功能,需要的朋友可以參考下2019-06-06
Vue.js中使用Vuex實現(xiàn)組件數(shù)據(jù)共享案例
這篇文章主要介紹了Vue.js中使用Vuex實現(xiàn)組件數(shù)據(jù)共享案例,具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue實現(xiàn)pdf導出解決生成canvas模糊等問題(推薦)
最近公司項目需要，利用vue實現(xiàn)pdf導出，從而保存到本地打印出來，說起來好像也很容易，具體要怎么實現(xiàn)呢？下面小編給大家?guī)砹藇ue實現(xiàn)pdf導出解決生成canvas模糊等問題，需要的朋友參考下吧2018-10-10
現(xiàn)在vue項目中，一般使用axios發(fā)送請求去后臺拉取數(shù)據(jù)。這篇文章主要介紹了vue axios post發(fā)送復雜對象的一點思考,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片上傳預覽功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03