介绍

根据提示滑动滑块使图片角度为正来完成验证。此组件基于 SlideVerify 组件。

引入

import RotateVerify from 'sard-uniapp/components/rotate-verify/rotate-verify.vue'

代码演示

基础使用

用法同 SlideVerify，仅多了一个 src 属性以展示图片的形式来代替虚线目标框。

vue lang="ts"

<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 lang="js"

<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

继承 SlideVerifyEmits

RotateVerifyExpose

继承 SlideVerifyExpose

主题定制

CSS 变量

page,
.sar-portal {
  --sar-rotate-verify-image-size: 256rpx;
  --sar-rotate-verify-image-margin-bottom: 40rpx;
}