介绍
根据提示滑动滑块使图片角度为正来完成验证。此组件基于 SlideVerify 组件。
引入
js
import RotateVerify from 'sard-uniapp/components/rotate-verify/rotate-verify.vue'代码演示
基础使用
用法同 SlideVerify,仅多了一个 src 属性以展示图片的形式来代替虚线目标框。
vue
<template>
<view class="mx-80">
<sar-rotate-verify
ref="verifyRef"
text="请按住滑块拖动"
success-text="验证通过"
:src="src"
:target-pos="targetPos"
:verify="verify"
></sar-rotate-verify>
<sar-button type="pale-text" class="mt-40" @click="onReset">
重置验证
</sar-button>
<sar-button type="pale-text" class="mt-20" @click="onUpdate">
更新
</sar-button>
</view>
</template>
<script setup lang="ts">
import {
random,
sleep,
SlideVerifyExpose,
SlideVerifyResult,
} from 'sard-uniapp'
import { ref } from 'vue'
const targetPos = ref(random(30, 80))
const src = ref('')
const verify = async ({ actualPos, targetPos }: SlideVerifyResult) => {
await sleep(100)
const errorValue = 3
if (
actualPos >= targetPos - errorValue &&
actualPos <= targetPos + errorValue
) {
return true
}
return false
}
const verifyRef = ref<SlideVerifyExpose>()
const onReset = () => {
verifyRef.value?.reset()
targetPos.value = random(30, 80)
}
let i = 0
function update() {
src.value = `https://fastly.jsdelivr.net/npm/@sard/assets/images/cat${(i = ++i % 12) || 12}.jpg`
}
update()
const onUpdate = () => {
update()
onReset()
}
</script>vue
<template>
<view class="mx-80">
<sar-rotate-verify
ref="verifyRef"
text="请按住滑块拖动"
success-text="验证通过"
:src="src"
:target-pos="targetPos"
:verify="verify"
></sar-rotate-verify>
<sar-button type="pale-text" class="mt-40" @click="onReset">
重置验证
</sar-button>
<sar-button type="pale-text" class="mt-20" @click="onUpdate">
更新
</sar-button>
</view>
</template>
<script setup lang="js">
import {
random,
sleep
} from "sard-uniapp";
import { ref } from "vue";
const targetPos = ref(random(30, 80));
const src = ref("");
const verify = async ({ actualPos, targetPos: targetPos2 }) => {
await sleep(100);
const errorValue = 3;
if (actualPos >= targetPos2 - errorValue && actualPos <= targetPos2 + errorValue) {
return true;
}
return false;
};
const verifyRef = ref();
const onReset = () => {
verifyRef.value?.reset();
targetPos.value = random(30, 80);
};
let i = 0;
function update() {
src.value = `https://fastly.jsdelivr.net/npm/@sard/assets/images/cat${(i = ++i % 12) || 12}.jpg`;
}
update();
const onUpdate = () => {
update();
onReset();
};
</script>API
RotateVerifyProps
继承 SlideVerifyProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| src | 图片资源地址 | string | - |
RotateVerifyEmits
RotateVerifyExpose
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-rotate-verify-image-size: 256rpx;
--sar-rotate-verify-image-margin-bottom: 40rpx;
}