使用VUE實現圖片驗證碼功能的示例

這篇文章給大家分享的是有關使用VUE實現圖片驗證碼功能的示例的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

1. 概述

1.1 說明

在開發過程中，有時候需要使用圖片驗證碼進行增加安全強度，在點擊圖片時更新新的圖片驗證碼，記錄此功能，以便后期使用。

2. 示例

2.1 vue示例代碼

<template>
 <el-form >
 <el-form-item >
 <el-input class="input" maxlength="8" placeholder="請輸入驗證碼"></el-input>
 <div class="divIdentifyingCode" @click="getIdentifyingCode(true)">
 <img id="imgIdentifyingCode"  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實現圖片驗證碼功能的示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！