VUE 圖片驗證碼

1. 概述

1.1 說明

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

 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.1 顯示