更新记录
1.0.0(2026-10-27)
首次发布:随机生成文字与位置,按顺序点击校验,支持自定义字库、字数、背景图
平台兼容性
uni-app(4.0)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| × | √ | √ | √ | - | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| - | - | - | - | - | - | - | - | - | - | - | - |
点选文字验证码
仅支持 Vue3 项目(HBuilderX 3.2.0+)
请依次点击指定文字完成验证。纯前端实现,开箱即用,组件通过 easycom 自动引入。
使用
<template>
<ht-clickcaptcha @success="onOk" @fail="onFail" />
</template>
<script setup>
const onOk = () => uni.showToast({ title: '验证通过' })
const onFail = () => console.log('验证失败')
</script>
属性
| 属性 | 说明 | 默认值 |
|---|---|---|
| width | 验证区域宽度(px) | 300 |
| height | 验证区域高度(px) | 160 |
| bgImage | 背景图地址(小程序请用网络图或 base64) | 无(渐变底) |
| count | 需要点击的字数 | 3 |
| total | 画面总字数(含干扰字) | 6 |
| pool | 候选字库(字符串) | 内置常用字 |
| fontSize | 字号(px) | 30 |
事件
| 事件 | 说明 |
|---|---|
| success | 验证通过 |
| fail | 验证失败,组件自动刷新 |
方法
通过 ref 调用 refresh() 可手动刷新验证码。
注意
校验在前端完成,适用于演示和低风险场景,不能替代服务端防刷。

收藏人数:
购买源码授权版(
试用
赞赏(0)
下载 0
赞赏 0
下载 12722111
赞赏 1958
赞赏
京公网安备:11010802035340号