Tui Plus Vapor

Appearance

t-verify-puzzle ​

VerifyPuzzle 拼图验证

组件介绍 ​

t-verify-puzzle 是拼图验证码组件，基于 Canvas 绘制，用于机器人验证。用户需要拖动滑块将拼图块移动到正确位置完成验证，纯前端实现，常用于接口访问防止机器频繁操作。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/verify-puzzle/verify-puzzle.uvue。

vue
<template>
  <view class="verify-puzzle-demo">
    <!-- 基础用法 -->
    <t-verify-puzzle 
      :imgs="imageList"
      @verify="onVerify">
    </t-verify-puzzle>
    
    <!-- 自定义拼图大小 -->
    <t-verify-puzzle 
      :imgs="imageList"
      :blockSize="50"
      :blockRadius="15"
      @verify="onVerify">
    </t-verify-puzzle>
    
    <!-- 自定义容错范围 -->
    <t-verify-puzzle 
      :imgs="imageList"
      :verifyRange="8"
      @verify="onVerify">
    </t-verify-puzzle>
  </view>
</template>

<script setup>
const imageList = [
  '/static/puzzle-1.jpg',
  '/static/puzzle-2.jpg',
  '/static/puzzle-3.jpg'
];

function onVerify(success) {
  if (success) {
    console.log('验证成功');
    // 执行后续操作
  } else {
    console.log('验证失败');
    // 提示用户重新验证
  }
}
</script>

<style scoped>
.verify-puzzle-demo {
  padding: 40rpx;
}
.verify-puzzle-demo t-verify-puzzle {
  margin-bottom: 40rpx;
}
</style>

Props ​

属性名说明类型默认值
imgs图片列表（用于随机选择验证图）string[][]
blockSize拼图滑块大小（像素）number42
blockRadius滑块圆角大小（像素）number10
verifyRange误差范围（像素）number5
title标题string'安全验证'
subTitle副标题string'拖动下方滑块完成拼图'
path点击组件后跳转的页面路径string''
hover是否启用点击效果booleanfalse
type组件主题类型string'primary'
disabled是否禁用booleanfalse
effect组件显示主题string'normal'
size组件尺寸，可选 large、medium、small、ministring'medium'

Events ​

事件名说明回调参数
verify触发验证时触发boolean（验证结果）