vue3生成随机验证码图片插件

最新推荐文章于 2025-04-24 16:46:48 发布

原创

最新推荐文章于 2025-04-24 16:46:48 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Vue3项目中，针对基于选项式API的identify插件进行改造，使其能在setup函数中使用。作者提供了tcom.vue组件代码，展示了如何生成动态验证码以及在Vue页面中的引用示例。

1、来源：

由于identify插件中在网上大多是vue2或者是选项式API的风格，但我用的是Vue3的组合式API，所以为了方便在vue3中使用identify，将identify进行了一些修改，使得可以在vue3的setup中自由使用该子组件。

2、tcom.vue

<template>
    <div class="s-canvas">
      <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
    </div>
</template>
<script setup>
import { nextTick } from 'vue'

var identifyCode={
  type: String,
  default: '1234'
}
//props
const props = defineProps({
    identifyCode: {
        type: String,
        default: '1234'
      },
      fontSizeMin: {
        type: Number,
        default: 28
      },
      fontSizeMax: {
        type: Number,
        default: 40
      },
      backgroundColorMin: {
        type: Number,
        default: 180
      },
      backgroundColorMax: {
        type: Number,
        default: 240
      },
      colorMin: {
        type: Number,
        default: 50
      },