前端生成uuid,运用uuid进而生成图片验证码

直接上代码,生成uuid

data定义：{
      // 生成验证码
      timeStamp: 0, // 时间戳
      uuid_uuid: "",
}
// 指定长度和基数
uuid(len, radix) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
      var uuid = [],
          i;
      radix = radix || chars.length;
      if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
      } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | Math.random() * 16;
            uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
          }
        }
      }

      return uuid.join('');
}


created() {
    this.uuid_uuid = this.uuid(20);
    // 时间戳
    // 一上来就有的验证码
    this.timeStamp = new Date().getTime();
},

methods: {
    // 点击更换图片验证码
    imgCli() {
      // 时间戳
      this.timeStamp = new Date().getTime();
    },
},

运用的列子

<div class="imgdiv" @click="imgCli">
  <img :src="`https://api.javamall.com.cn/base/captchas/${uuid_uuid}/LOGIN?r=${timeStamp}`" @click="imgCli">
</div>