vue中用Canvas实现验证码功能

最新推荐文章于 2024-06-07 10:00:01 发布

Kyrossssssss

最新推荐文章于 2024-06-07 10:00:01 发布

阅读量480

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_35590165/article/details/107033387

版权

本文介绍如何在Vue项目中利用Canvas和TypeScript技术生成验证码功能，主要涉及Vue组件和Canvas的基本操作。

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

vue中用Canvas实现验证码功能（typescript）

Verification.vue

<template>
  <canvas
    id="canvas"
    @click="showNum"
  ></canvas>
</template>

<script lang="ts">
import Vue from "vue";
import {
    Component } from "vue-property-decorator";
@Component({
   })
export default class Product extends Vue {
   
  private num!: string[];
  private number!: string;
  data() {
   
    return {
   
      num: [],
      number: ""
    };
  }
  /**
   * @description:展示验证码
   */
  showNum() {
   
    this.draw(this.num);
    this.number = this.num.join().replace