vue项目中生成随机图形验证码

最新推荐文章于 2024-06-11 07:55:32 发布

多喝.热水

最新推荐文章于 2024-06-11 07:55:32 发布

阅读量1.6k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ZQmxy/article/details/125118421

版权

我们在表单验证的时候添加一个图形验证码
在这里插入图片描述

首先在components文件夹中新建一个VerificationCode.vue文件，输入以下代码

<template>
  <span class="s-canvas" @click="changeCode">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </span>
</template>

<script>
export default {
  name: "Code",
  data() {
    return {
      identifyCode: "",
    };
  },
  props: {
    identifyCodes: {
      //验证码从该字段中抽取生成
      type: String,
      default: "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ",  //这里可以随便输数字字母
    },
    fontSizeMin: {
      // 字体最小值
      type: Number,
      default: 25,
    },
    fontSizeMax: {
      // 字体最大值
      type: Number,
      default: 35,
    },
    backgroundColorMin: {
      // 验证码图片背景色最小值
      type: Number,
      defaul