Vue图片验证码-自定义组件高级版

最新推荐文章于 2024-03-09 18:01:31 发布

darkerxi

最新推荐文章于 2024-03-09 18:01:31 发布

阅读量656

点赞数

文章标签： vue javascript 图片验证码自定义组件

本文链接：https://blog.csdn.net/qq_20097569/article/details/103508635

版权

本文介绍了一次对Vue图片验证码组件的改造升级，改造后的验证码可支持不同位数、纯数字或字母、数字字母混合及大小写等多种组合，满足多样化需求。详细介绍了改造过程，包括组件的基本结构和在App.vue中的引用。

摘要由CSDN通过智能技术生成

最近项目中要用到图片验证码，网上一查有很多，基本都是千篇一律的4位纯数字验证码。首先得感谢那位一代目兄台提供的模板，由于不能满足需求，所以对其进行了改造升级。

经改造的图片验证码能满足一下情形使用：①、验证码位数；②、纯数字和纯字母的验证码；③、数字和字母混合的验证码；④、字母的大小写；⑤、数字和字母（大小写）混合下各自的位数；⑥、随机生成混合情况下各自的位数；⑦、验证码随机排序。大致就这些组合吧，基本的需求都能满足，话不多说，看~

1、先把一代目兄台的canvas参数搬一下

参数	说明	类型	默认值
identifyCode	展示的图片验证码	string	1234
fontSizeMin	字体大小，最小值	number	16
fontSizeMax	字体大小，最大值	number	40
backgroundColorMin	背景颜色色值最小值，最小为	number	180
backgroundColorMax	背景颜色色值最大值，最大为255	number	240
colorMin	字体颜色色值最小值，最小为0	number	50
colorMax	字体颜色色值最大值，最大为255	number	160
lineColorMin	干扰线颜色色值最小值，最小为0	number	40
lineColorMax	干扰线颜色色值最大值，最大为255	number	180
dotColorMin	干扰点颜色色值最小值，最小为0	number	0
dotColorMax	干扰点颜色色值最大值，最大为255	number	255
contentWidth	画布宽度	number	160
contentHeight	画布高度	number	40

2、主角儿identify.vue组件登场

<template>
  <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
</template>
<script>
export default {
   
  name: 'SIdentify',
  props: {
   
    // 图片验证码
    identifyCode: {
   
      type: String,
      default: '1234'
    },
    // 字体最小值
    fontSizeMin: {
   
      type: Number,
      default: 28
    },
    // 字体最大值
    fontSizeMax: {
   
      type: Number,
      default: 34
    },
    // 背景颜色色值最小值，最小为0
    backgroundColorMin: {
   
      type: Number,
      default: 200
    },
    // 背景颜色色值最大值，最大为255
    backgroundColorMax: {
   
      type: Number,
      default: 240
    },
    // 字体颜色色值最小值，最小为0
    colorMin: {
   
      type: Number,
      default: 0
    },
    // 字体颜色色值最大值，最大为255
    colorMax: {
   
      type: Number,
      default: 180
    },
    // 干扰线颜色色值最小值，最小为0
    lineColorMin: {
   
      type: Number,
      default: 150
    },
    // 干扰线颜色色值最大值，最大为255
    lineColorMax: {
   
      type: Number,
      default: 200
    },
    // 干扰点颜色色值最小值，最小为0
    dotColorMin: {
   
      type: Number,
      default: 100
    },
    // 干扰点颜色色值最大值，最大为255
    dotColorMax: {
   
      type: Number,
      default: 250
    },
    // 画布宽度
    contentWidth: {
   
      type: Number,
      default: 100
    },
    // 画布高度
    contentHeight: {
   
      type: Number,
      default: 40
    }
  },
  mounted () {
   
    this.drawPic()
  },
  methods: {
   
    /**
     * 生成一个随机数
     * @param {number} min 随机数最小值
     * @param {number} max 随机数最大值
     */
    randomNum (min, max) {
   
      return Math.floor(Math.random() * (max - min) + min)
    },

    /**
     * 生成一个随机的颜色
     * @param {number} min 随机数最小值
     * @param {number} max 随机数最大值
     */
    randomColor (min, max) {
   
      const r = this.randomNum(min, max)
      const g = this.randomNum(min, max)
      const b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ','