介绍
根据提示滑动滑块到指定位置来完成验证。
引入
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表示最左边 | number | 100 |
| text | 默认状态下的文案 | string | - |
| success-text | 验证成功状态下的文案 | string | - |
| error-text | 验证失败状态下的文案 | string | - |
| disabled | 是否禁用 | boolean | false |
| reset-when-error | 是否在验证失败时重置 | boolean | true |
| show-target | 是否显示目标 | boolean | false |
| 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);
}