Vue3+Typescript滑动验证,无其他依赖。

目录

  • 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录VUE3+TS实现
    • 快速使用
      • 1.项目中引用
      • props
      • 事件
      • 实例API
      • description
      • example

基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录VUE3+TS实现

A Vue3 plugin to slide verify Demo

滑动验证
github地址:https://github.com/monoplasty/vue3-slide-verify

快速使用

1.项目中引用

安装:

npm install --save vue3-slide-verify

props

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

事件

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

实例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, { 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>

你可能感兴趣的:(Vue,typescript,vue3,slide,verify)