快应用
2024.11.01 11:59:35
验证码组件
下载快应用接入示例,可根据验证码文档修改示例代码或替换动画素材等。
项目接入
- 组件:拷贝 component 下的 ne-captcha 组件至项目中
- manifest 配置:
{
"trustedSslDomains": [
"cstaticdun.126.net"
],
"features": [
{ "name": "system.webview" }
]
}
组件参数及方法
配置项:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
captchaId | string | 是 | 验证码id |
width | number | 是 | 验证码宽度 |
lang | string | 否 | 验证码语言选项 |
组件监听事件:
引入页面可通过 $broadcast
通知组件进行下述动作,具体见示例
verify
: 开始验证reset
: 重置验证码
自定义事件:
error
: 验证码加载错误captchaInit
: 验证码初始化成功captchaReady
: 验证码准备就绪verify
: 验证码一次验证结束
接入示例
<import name="ne-captcha" src="../component/ne-captcha/index.ux"></import>
<template>
<div>
<div>
<ne-captcha
captcha-id="易盾验证码ID"
width="{{ 640 }}"
@error="handleCaptchaError"
@verify="handleCaptchaVerify"></ne-captcha>
</div>
<input
type="button"
value="验证"
@click="captchaVerfiy"></input>
</div>
</template>
<script>
export default {
captchaVerfiy() {
this.$broadcast('necaptcha', {
type: 'verify'
})
},
handleCaptchaError (ev) {
// TODO: 错误处理
},
handleCaptchaVerify (ev) {
const validate = ev.detail
if (validate && !validate[0]) {
// 验证成功,获取validate[1]进行二次验证
} else {
// 验证失败,无需reset,内部会自动刷新
}
}
}
</script>