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 显示