ImageVerifyCode 图片验证码

基于 canvas 生成图片验证码，适合登录或表单二次校验场景。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { ImageVerifyCode } from "@/components/core/image-verify-code";

const value = ref("IDX9");
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <ImageVerifyCode v-model="value" />
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { ImageVerifyCode } from "@/components/core/image-verify-code";

Props

参数	说明	类型	默认值	必填
modelValue	组件双向绑定值。	string	-	是

Events

事件名	说明	回调参数
update:modelValue	双向绑定值更新时触发。	value: string

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
getImgCode	重新生成并返回图片验证码。	-

Module API

名称	说明	类型
ImageVerifyCode	导出 ImageVerifyCode 供业务侧复用。	useInstall(index)

API 根据当前组件源码生成；同步版本与验证记录见维护说明。