vue3-slide-verify

A Vue3 plugin to slide verify Demo

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Quick Start

1. Import vue3-slide-verify into your vue3 project.

Using build tools:

npm install --save vue3-slide-verify

国内镜像地址 gitee镜像地址

学习交流

最近发现有的朋友给我发私信，但我没来的及回复，有兴趣的朋友可以加入社群交流学习：669653069

argument

Param	Type	Describe	Version
l	Number	block length
r	Number	block circle radius
w	Number	canvas width
h	Number	canvas height
sliderText	String	Slide filled right
imgs	Array	picture array 背景图数组，默认值 []
accuracy	Number	滑动验证的误差范围，默认值 5
show	Boolean	是否显示刷新按钮，默认值 true
interval	Number	节流函数的时间间隔，默认值 50	1.1.2
offset	Number	初始渲染时，卡片的偏移值。（可用于后端验证；从后端获取，并且成功回调中会返回滑块移动的距离）	1.1.8

callBack

Event	Type	Describe	Version
success	Function	success callback	返回耗时和滑块移动距离参数，单位为毫秒和px
fail	Function	fail callback
refresh	Function	点击刷新按钮后的回调函数
again	Function	检测到非人为操作滑动时触发的回调函数

更新记录

V1.1.8

• 新增offset参数，支持后端传入初始渲染滑块水平位置，成功回调可以获取到滑块水平移动距离。

V1.1.6

• 修复图片链接失效问题，增加文档联系方式。

V1.1.5

• 修复在新版vue项目中，ts类型文件找不到的问题。

V1.1.2

• 针对滑动事件增加节流操作。
• 提高性能。

实例API

• 在父组件里如果需要重置，可以在父组件中调用子组件refresh() 方法

<slide-verify ref="block" ></slide-verify>

setup() {
  const block = ref(null);
  // 元素挂载之后才能访问ref
  onMounted(() => {
    block.value.refresh();
  })
  return {
    block,
  }
}

description

• accuracy 精度设置

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

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

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

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

example

参考如下写法

<template>
  <div>
    <slide-verify
      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, { type 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 = (detail: { timestamp: number; left: number }) => {
      msg.value = `login success, 耗时${(detail.timestamp / 1000).toFixed(1)}s, 移动距离${detail.left}px`;
    };

    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>