Vue 前端生成图片验证码

<template>
  <div class="verify-code" :style="`width:${width}; height:${height}`" @click="onRefreshCode">
    <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">
      {{ item.code }}
    </span>
  </div>
</template>

<script>
import { CHARS_SET, CHARS_SET_LENGTH } from '@common/utils';

export default {
  name: 'VerifyCode',

  props: {
    width: {
      type: String,
      default: '90px'
    },

    height: {
      type: String,
      default: '32px'
    },

    length: {
      type: Number,
      default: 4
    }
  },

  data() {
    return {
      codeList: []
    };
  },

  mounted() {
    const vm = this;

    vm.onRefreshCode();
  },

  methods: {
    onRefreshCode() {
      const vm = this;
      const { length } = vm;

      const codeList = [];
      for (let i = 0; i < length; i += 1) {
        const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)];
        codeList.push({
          code: CHARS_SET.charAt(Math.floor(Math.random() * CHARS_SET_LENGTH)),
          color: `rgb(${rgb})`,
          fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
        });
      }
      vm.codeList = codeList;
      vm.$emit('update-value', codeList.map(item => item.code.toLowerCase()).join(''));
    },

    getStyle(data) {
      return `color: ${data.color};
        font-size: ${data.fontSize};
        padding: ${data.padding};
        transform: ${data.transform}`;
    }
  }
};
</script>

<style lang="scss" scoped>
  .verify-code {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(218,218,218,1);
    background-color: $white;
    user-select: none;
    cursor: pointer;

    span {
      display: inline-block;
    }
  }
</style>