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