前言 

在vue3中引用 vue3-slide-verify组件去做滑块

gitee地址：vue3-slide-verify

在线demo： 在线查看demo地址

目录

 一、安装npm依赖

二、使用方法

argument

callBack

description

 三、新建组件slideVerify

四、父组件调用

五、展示示例 

---

 一、安装npm依赖

npm install --save vue3-slide-verify

二、使用方法

argument

callBack

description

• accuracy 精度设置

判断滑块与凹槽位置的误差范围值，默认取值范围为 [1, 10]。若取值不为 -1，则会开启检测非人为操作。人为操作也有可能会触发哦！

判断依据是：滑块的一系列移动坐标的平均值和方差是否相等。若相等则人为是非人为操作。

若accuracy为 -1，则表示关闭检测非人为操作，默认开启。开启之后，若检测到为非人为操作，则会触发 again 回调函数

• props 中 imgs设置：
  • 当imgs不传或者传空数组时，图片库默认使用第三方api提供的图片路径。可能加载缓慢；
  • 当imgs传本地路径时，确保图片路径是否正确。建设传oss上的图片地址。
  • 详情可参考APP.vue上的写法。

 三、新建组件slideVerify

<template>
  <div class="silde_box">
    <slide-verify
    class="silde_box"
      ref="block"
      :slider-text="text"
      :accuracy="accuracy"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    >slide-verify>
    <button class="btn" @click="handleClick">在父组件可以点我刷新哦button>
    <div>{{ msg }}div>
  div>
template>
 
<script lang="ts">
import { defineComponent, ref } from "vue";
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
 
export default defineComponent({
  components: { SlideVerify },
 
  setup() {
    const msg = ref("");
    const block = ref<SlideVerifyInstance>();
 
    const onAgain = () => {
      msg.value = "检测到非人为操作的哦！ try again";
      // 刷新
      block.value?.refresh();
    };
 
    const onSuccess = (times: number) => {
      msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
    };
 
    const onFail = () => {
      msg.value = "验证不通过";
    };
 
    const onRefresh = () => {
      msg.value = "点击了刷新小图标";
    };
 
    const handleClick = () => {
      // 刷新
      block.value?.refresh();
      msg.value = "";
    };
 
    return {
      block,
      msg,
      text: "向右滑动->",
      accuracy: 1,
      onAgain,
      onSuccess,
      onFail,
      onRefresh,
      handleClick,
    };
  },
});
script>
<style scoped>
.silde_box{
  margin:0 auto;
}
style>

四、父组件调用

<template>
    <v-verify >v-verify>
template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import slideVerify from "./components/slideVerify.vue";
 
export default defineComponent({
  components: {
    'v-verify':slideVerify
  }
})
script>

五、展示示例