Sard Uniapp

Appearance

在新窗口打开⤴

SlideVerify滑动验证1.26+

介绍 ​

根据提示滑动滑块到指定位置来完成验证。

引入 ​

js
import SlideVerify from 'sard-uniapp/components/slide-verify/slide-verify.vue'

代码演示 ​

基础使用 ​

使用 text, success-text 属性设置文案。

使用 verify 属性进行验证，其为一个函数，接收用户操作结果，返回布尔类型或者 Promise，为真时验证成功，否则验证失败； 操作结果对象的 actualPos 属性是一个百分比数值，表示用户拖拽的距离，为100时表示拖拽到最右边。

验证完，可调用 reset 方法重置结果。

vue
<template>
  <view class="mx-80">
    <sar-slide-verify
      ref="verifyRef"
      text="请按住滑块拖动"
      success-text="验证通过"
      :verify="verify"
    ></sar-slide-verify>

    <sar-button type="pale-text" class="mt-40" @click="onReset">
      重置验证
    </sar-button>
  </view>
</template>

<script setup lang="ts">
import { sleep, SlideVerifyExpose, SlideVerifyResult } from 'sard-uniapp'
import { ref } from 'vue'

const verify = async ({ actualPos }: SlideVerifyResult) => {
  await sleep(300)

  if (actualPos === 100) {
    return true
  }
  return false
}

const verifyRef = ref<SlideVerifyExpose>()

const onReset = () => {
  verifyRef.value?.reset()
}
</script>
vue
<template>
  <view class="mx-80">
    <sar-slide-verify
      ref="verifyRef"
      text="请按住滑块拖动"
      success-text="验证通过"
      :verify="verify"
    ></sar-slide-verify>

    <sar-button type="pale-text" class="mt-40" @click="onReset">
      重置验证
    </sar-button>
  </view>
</template>

<script setup lang="js">
import { sleep } from "sard-uniapp";
import { ref } from "vue";
const verify = async ({ actualPos }) => {
  await sleep(300);
  if (actualPos === 100) {
    return true;
  }
  return false;
};
const verifyRef = ref();
const onReset = () => {
  verifyRef.value?.reset();
};
</script>

显示目标 ​

设置 show-target 属性显示目标；使用 target-pos 属性设置目标位置，类型为百分比数值，默认为 100；可比较操作结果对象的 targetPos 和 actualPos 属性值来判断是否拖拽到位。

vue
<template>
  <view class="mx-80">
    <sar-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      show-target
      :target-pos="targetPos"
      :verify="verify"
    ></sar-slide-verify>

    <sar-button type="pale-text" class="mt-40" @click="onReset">
      重置验证
    </sar-button>
  </view>
</template>

<script setup lang="ts">
import {
  random,
  sleep,
  SlideVerifyExpose,
  SlideVerifyResult,
} from 'sard-uniapp'
import { ref } from 'vue'

const targetPos = ref(random(50, 100))

const verify = async ({ targetPos, actualPos }: SlideVerifyResult) => {
  await sleep(300)

  const errorValue = 2
  if (
    actualPos >= targetPos - errorValue &&
    actualPos <= targetPos + errorValue
  ) {
    return true
  }
  return false
}

const verifyRef = ref<SlideVerifyExpose>()

const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(50, 100)
}
</script>
vue
<template>
  <view class="mx-80">
    <sar-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      show-target
      :target-pos="targetPos"
      :verify="verify"
    ></sar-slide-verify>

    <sar-button type="pale-text" class="mt-40" @click="onReset">
      重置验证
    </sar-button>
  </view>
</template>

<script setup lang="js">
import {
  random,
  sleep
} from "sard-uniapp";
import { ref } from "vue";
const targetPos = ref(random(50, 100));
const verify = async ({ targetPos: targetPos2, actualPos }) => {
  await sleep(300);
  const errorValue = 2;
  if (actualPos >= targetPos2 - errorValue && actualPos <= targetPos2 + errorValue) {
    return true;
  }
  return false;
};
const verifyRef = ref();
const onReset = () => {
  verifyRef.value?.reset();
  targetPos.value = random(50, 100);
};
</script>

错误时不重置 ​

默认验证失败会自动重置结果，如果需要手动重置，可设置 :reset-when-error="false" 属性。

vue
<template>
  <view class="mx-80">
    <sar-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      error-text="验证失败"
      show-target
      :target-pos="targetPos"
      :reset-when-error="false"
      :verify="verify"
    ></sar-slide-verify>

    <sar-button type="pale-text" class="mt-40" @click="onReset">
      重置验证
    </sar-button>
  </view>
</template>

<script setup lang="ts">
import {
  random,
  sleep,
  SlideVerifyExpose,
  SlideVerifyResult,
} from 'sard-uniapp'
import { ref } from 'vue'

const targetPos = ref(random(50, 100))

const verify = async ({ targetPos, actualPos }: SlideVerifyResult) => {
  await sleep(300)

  const errorValue = 2
  if (
    actualPos >= targetPos - errorValue &&
    actualPos <= targetPos + errorValue
  ) {
    return true
  }
  return false
}

const verifyRef = ref<SlideVerifyExpose>()

const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(50, 100)
}
</script>
vue
<template>
  <view class="mx-80">
    <sar-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      error-text="验证失败"
      show-target
      :target-pos="targetPos"
      :reset-when-error="false"
      :verify="verify"
    ></sar-slide-verify>

    <sar-button type="pale-text" class="mt-40" @click="onReset">
      重置验证
    </sar-button>
  </view>
</template>

<script setup lang="js">
import {
  random,
  sleep
} from "sard-uniapp";
import { ref } from "vue";
const targetPos = ref(random(50, 100));
const verify = async ({ targetPos: targetPos2, actualPos }) => {
  await sleep(300);
  const errorValue = 2;
  if (actualPos >= targetPos2 - errorValue && actualPos <= targetPos2 + errorValue) {
    return true;
  }
  return false;
};
const verifyRef = ref();
const onReset = () => {
  verifyRef.value?.reset();
  targetPos.value = random(50, 100);
};
</script>

自定义主题色 ​

可通过 css 变量 --sar-slide-verify-theme-color 来设置想要的主题色。

vue
<template>
  <view class="mx-80">
    <sar-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      error-text="验证失败"
      show-target
      :target-pos="targetPos"
      :reset-when-error="false"
      :verify="verify"
      style="--sar-slide-verify-theme-color: var(--sar-primary)"
    ></sar-slide-verify>

    <sar-button type="pale-text" class="mt-40" @click="onReset">
      重置验证
    </sar-button>
  </view>
</template>

<script setup lang="ts">
import {
  random,
  sleep,
  SlideVerifyExpose,
  SlideVerifyResult,
} from 'sard-uniapp'
import { ref } from 'vue'

const targetPos = ref(random(50, 100))

const verify = async ({ targetPos, actualPos }: SlideVerifyResult) => {
  await sleep(300)

  const errorValue = 2
  if (
    actualPos >= targetPos - errorValue &&
    actualPos <= targetPos + errorValue
  ) {
    return true
  }
  return false
}

const verifyRef = ref<SlideVerifyExpose>()

const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(50, 100)
}
</script>
vue
<template>
  <view class="mx-80">
    <sar-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      error-text="验证失败"
      show-target
      :target-pos="targetPos"
      :reset-when-error="false"
      :verify="verify"
      style="--sar-slide-verify-theme-color: var(--sar-primary)"
    ></sar-slide-verify>

    <sar-button type="pale-text" class="mt-40" @click="onReset">
      重置验证
    </sar-button>
  </view>
</template>

<script setup lang="js">
import {
  random,
  sleep
} from "sard-uniapp";
import { ref } from "vue";
const targetPos = ref(random(50, 100));
const verify = async ({ targetPos: targetPos2, actualPos }) => {
  await sleep(300);
  const errorValue = 2;
  if (actualPos >= targetPos2 - errorValue && actualPos <= targetPos2 + errorValue) {
    return true;
  }
  return false;
};
const verifyRef = ref();
const onReset = () => {
  verifyRef.value?.reset();
  targetPos.value = random(50, 100);
};
</script>

API ​

SlideVerifyProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
target-pos目标位置，百分比数值，100表示最右边，0表示最左边number100
text默认状态下的文案string-
success-text验证成功状态下的文案string-
error-text验证失败状态下的文案string-
disabled是否禁用booleanfalse
reset-when-error是否在验证失败时重置booleantrue
show-target是否显示目标booleanfalse
verify验证函数，接收操作结果，返回 true 或者 Promise<true> 表示验证成功，否则验证失败(result: SlideVerifyResult) => Promise\<boolean> | boolean-

SlideVerifyResult ​

ts
interface SlideVerifyResult {
  targetPos: number
  actualPos: number
  startTime: number
  endTime: number
  trajectory: [x: number, y: number, t: number][]
}
属性描述
targetPos目标位置百分比
actualPos实际拖拽位置百分比
startTime拖拽开始时间戳
endTime拖拽结束时间戳
trajectory拖拽轨迹点数组，记录每个轨迹点的屏幕坐标和时间戳

SlideVerifyEmits ​

事件描述类型
change拖拽或重置使当前滑块变动时触发，接收当前拖拽的百分比值(percent: number) => void
start拖拽开始时触发(event: any) => void
move拖拽移动时触发(event: any) => void
end拖拽结束时触发(event: any) => void

SlideVerifyExpose ​

属性描述类型
reset重置验证结果() => void

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-slide-verify-heigt: 80rpx;
  --sar-slide-verify-bg: var(--sar-secondary-bg);
  --sar-slide-verify-theme-color: var(--sar-success);
  --sar-slide-verify-border-radius: var(--sar-rounded-sm);
  --sar-slide-verify-border-color: var(--sar-fourth-color);
  --sar-slide-verify-font-size: var(--sar-text-base);
  --sar-slide-verify-icon-size: 48rpx;
  --sar-slide-verify-duration: var(--sar-duration);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao