介绍

根据提示滑动滑块使拼成完整一张图来完成验证。此组件基于 SlideVerify 组件。

引入

import PuzzleVerify from 'sard-uniapp/components/puzzle-verify/puzzle-verify.vue'

代码演示

基础使用

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

图片宽度 100%，高度自适应，为避免图片未加载完时位置被占领，可设置 aspect-ratio 属性让容器占据一定高度。

vue lang="ts"

<template>
  <view class="mx-80">
    <sar-puzzle-verify
      ref="verifyRef"
      text="请按住滑块拖动"
      success-text="验证通过"
      :src="src"
      :target-pos="targetPos"
      :verify="verify"
      :aspect-ratio="320 / 219"
    ></sar-puzzle-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-puzzle-verify
      ref="verifyRef"
      text="请按住滑块拖动"
      success-text="验证通过"
      :src="src"
      :target-pos="targetPos"
      :verify="verify"
      :aspect-ratio="320 / 219"
    ></sar-puzzle-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

PuzzleVerifyProps

继承 SlideVerifyProps 并有以下额外属性：

属性	描述	类型	默认值
src	图片资源地址	string	-
aspect-ratio	图片宽高比，用于占位图片高度	number	320 / 240

PuzzleVerifyEmits

继承 SlideVerifyEmits

PuzzleVerifyExpose

继承 SlideVerifyExpose

主题定制

CSS 变量

page,
.sar-portal {
  --sar-puzzle-verify-image-margin-bottom: 20rpx;
  --sar-puzzle-verify-piece-width: 88rpx;
  --sar-puzzle-verify-piece-height: 88rpx;
  --sar-puzzle-verify-piece-box-shadow: 2px 2px 15px rgb(0 0 0 / 0.8);
  --sar-puzzle-verify-hollow-box-shadow: inset 2px 2px 5px 0 rgb(0 0 0 / 0.4);
}