滑动验证 xSlideVerify
在线预览
在线模拟尺寸:
介绍
可以防止机器人刷新页面，防止恶意注册，防止恶意评论等
平台兼容
| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
|---|---|---|---|---|---|---|---|
| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
文件路径
ts
@/uni_modules/tmx-ui/components/x-slide-verify/x-slide-verify.uvue使用
ts
<x-slide-verify></x-slide-verify>Props 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 宽，允许使用auto,百分比，数字，带单位的字符串 | string | 'auto' |
| height | 高不允许使用auto | string | '50' |
| color | 未激活背景色 | string | '#e9ecf0' |
| activeColor | 激活时的状态背景色，空取全局 | string | '' |
| darkColor | 暗黑时的未激活背景色 | string | '#21232c' |
| successColor | 验证通过时的背景色 | string | 'success' |
| failColor | 验证失败时的背景色 | string | 'error' |
| btnColor | 按钮背景 | string | 'white' |
| btnDarkColor | 暗黑按钮背景，如果为空取sheetDarkColor | string | '#3b3e4d' |
| btnFontColor | 空取全局主题色 | string | "" |
| btnFontSize | 按钮上的图标大小 | string | "20" |
| verifyPos | 验证正确的位置0-100是百分比，让用户滑动到哪个位置触发验证正确。 | number | 100 |
| showVerifyBox | 是否显示目标指示框 | boolean | false |
| tipsText | 默认的提示验证文本,请拖动到指定位置 | string | "" |
| tipsTextSuccess | 失败时的文本,验证成功 | string | "" |
| tipsTextFail | 成功时的文本,验证失败 | string | "" |
| tipsTextColor | 底部提示文本颜色 | string | "#b8b8b8" |
| round | 圆角 | string | "25" |
| resetAuto | 验证失败时，是否自动重置 | boolean | true |
Events 事件
| 名称 | 参数 | 说明 |
|---|---|---|
| start | - | 开始拖动验证时触发 |
| success | - | 验证成功时触发 |
| fail | - | 验证失败时触发 |
| completed | - | 用户拖放结束时触发 |
| reset | - | 重置时触发 |
Slots 插槽
| 名称 | 说明 | 数据 |
|---|---|---|
| activeLabel | 激活时的标签插槽 | - |
| btn | 拖动时的按钮插槽 | - |
| target | 目标虚拟框位置的插槽 | - |
| label | 未激活时的标签插槽 | - |
Ref 方法
| 名称 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| reset | - | - | - |
示例文件路径
json
/pages/qita/slide-verify示例源码
uvue
vue
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
</page-meta>
<!-- #endif -->
<x-sheet>
<x-text font-size="18" class=" text-weight-b mb-8">滑动验证 xSlideVerify</x-text>
<x-text color="#999999">
可以防止机器人刷新页面，防止恶意注册，防止恶意评论等
</x-text>
</x-sheet>
<x-sheet>
<x-slide-verify></x-slide-verify>
</x-sheet>
<x-sheet>
<x-text font-size="18" class=" text-weight-b mb-8">显示指示框并设定目标值</x-text>
<x-slide-verify ref='verify' :verifyPos="50" :showVerifyBox="true"></x-slide-verify>
<x-button @click="reset" class="mt-20" :block="true">重置</x-button>
</x-sheet>
<x-sheet color="primary">
<x-text color="white" font-size="18" class=" text-weight-b mb-8">改变样式</x-text>
<x-slide-verify activeColor="warn" :verifyPos="80" :showVerifyBox="true" round="0"></x-slide-verify>
</x-sheet>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup lang="uts">
const verify = ref<XSlideVerifyComponentPublicInstance|null>(null)
const reset = () => {
if(verify.value==null) return;
verify.value?.reset?.()
}
</script>
<style>
</style>