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; /*設(shè)置圖片顯示的寬*/
height: 40px; /*圖片顯示的高*/
background: #e2e2e2;
margin: 0;
}
</style>
注意：使用 Math.random() 來獲取新的驗證碼，后臺支持使用接口獲取驗證碼。
2.2 顯示
關(guān)于vue.js的學習教程，請大家點擊專題vue.js組件學習教程、Vue.js前端組件學習教程進行學習。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli3 設(shè)置端口號(81)無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
這篇文章主要為大家詳細介紹了Vue2組件tree實現(xiàn)無限級樹形菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue不操作dom實現(xiàn)圖片輪播的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
從零開始在vue-cli4配置自適應(yīng)vw布局的實現(xiàn)
這篇文章主要介紹了從零開始在vue-cli4配置自適應(yīng)vw布局，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要為大家詳細介紹了Vue實現(xiàn)開關(guān)按鈕拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
我在做項目的時候，有一個需求，在離開（跳轉(zhuǎn)或者關(guān)閉）購物車頁面或者刷新購物車頁面的時候向服務(wù)器提交一次購物車商品數(shù)量的變化。這篇文章主要介紹了vue監(jiān)聽頁面刷新和關(guā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 移動端拍照壓縮圖片上傳預(yù)覽功能
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片上傳預(yù)覽功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03