# t-verify-puzzle

VerifyPuzzle 拼图验证

t-verify-puzzle 组件介绍

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

t-verify-puzzle 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-verify-puzzle 基础用法

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

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title='VerifyPuzzle 拼图验证'
				sub-title="用于机器人验证,常用于接口访问防止机器频繁操作浪费资源!"></t-card>
		<t-verify-puzzle :imgs="imgs"
						 type="primary"
						 class="mb-15"
						 @verify="verify"></t-verify-puzzle>
		<t-verify-puzzle :imgs="imgs"
						 type="success"
						 @verify="verify"></t-verify-puzzle>
	</view>
</template>

<script setup>
	const imgs = ref<string[]>([
		'/static/puzzle/img.jpg',
		'/static/puzzle/img1.jpg',
		'/static/puzzle/img2.jpg',
		'/static/puzzle/img3.jpg',
		'/static/puzzle/img4.jpg',
		'/static/puzzle/img5.jpg'
	])
	function verify(e : boolean) {
		// uni.showModal({
		// 	title: e ? '验证成功' : '验证失败'
		// })
	}
</script>

t-verify-puzzle Props

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

t-verify-puzzle Events

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