使用VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能的示例

這篇文章給大家分享的是有關(guān)使用VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能的示例的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

1. 概述

1.1 說(shuō)明

在開發(fā)過(guò)程中，有時(shí)候需要使用圖片驗(yàn)證碼進(jìn)行增加安全強(qiáng)度，在點(diǎn)擊圖片時(shí)更新新的圖片驗(yàn)證碼，記錄此功能，以便后期使用。

2. 示例

2.1 vue示例代碼

<template>
 <el-form >
 <el-form-item >
 <el-input class="input" maxlength="8" placeholder="請(qǐng)輸入驗(yàn)證碼"></el-input>
 <div class="divIdentifyingCode" @click="getIdentifyingCode(true)">
 <img id="imgIdentifyingCode"  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() 來(lái)獲取新的驗(yàn)證碼，后臺(tái)支持使用接口獲取驗(yàn)證碼。

2.2 顯示

感謝各位的閱讀！關(guān)于“使用VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能的示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！