Vue3+Typescript滑动验证，无其他依赖。_typescript 生成滑动验证码-程序员宅基地

技术标签： slide  Vue  verify  vue3  typescript  

目录

基于滑动式的验证码，免于字母验证码的繁琐输入 用于网页注册或者登录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>
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/monoplasty/article/details/122039356

智能推荐

flask-login-程序员宅基地

文章浏览阅读170次。创建扩展对象实例from flask_login import LoginManagerlogin_manager = LoginManager()login_manager.login_view = 'auth.login'# 上面这一句是设置登录视图的名称，如果一个未登录用户请求一个只有登录用户才能访问的视图，# 则闪现一条错误消息，并重定向到这里设置的登录视图。# 如果未设置..._python flask please log in to access this page

html怎么控制top值为0,关于vue滚动scrollTop 赋值一直为0问题-程序员宅基地

文章浏览阅读428次。Vue中document.body.scrollTop的值总为零的解决办法最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0但是发现document.body.scrollTop一直是0。查资料发现是DTD的问题。页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。页面没有DTD，即没指定DOCTYPE时，使用d..._滚动给scrolltop赋值

kingbase数据库安装教程（初步使用）（人大金仓）-程序员宅基地

文章浏览阅读2.1k次，点赞25次，收藏21次。人大金仓数据库管理系统KingbaseES（简称：金仓数据库或KingbaseES）是北京人大金仓信息技术股份有限公司自主研制开发的具有自主知识产权的通用关系型数据库管理系统。_kingbase

vue基础笔试题_vue笔试题-程序员宅基地

文章浏览阅读1.2w次，点赞20次，收藏156次。ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。..............._vue笔试题

isis协议配置和详解-程序员宅基地

文章浏览阅读1.1w次，点赞2次，收藏23次。isis是一种与ospf很相似的网络协议（属于动态路由协议）,它被应用在巨大规模网络,如运营商以及银行等。同样的它也是基于链路状态算法,支持clnp网络,ip网络。与ospf不同的是,它是基于数据链路层报文传输,而ospf则是在ip层进行计算。它可以自动的发现远程网络，只要网络拓扑结构发生了变化，路由器就会相互交换路由信息，不仅能够自动获知新增加的网络，还可以在当前网络连接失败时找出备用路径。无类..._isis协议配置

Proxychains 手册_proxychains是什么-程序员宅基地

文章浏览阅读1.9k次。名称：Proxychains – 通过代理服务器进行连接语法：proxychains 描述：这个程序会强制所有使用特定tcp连接的客户端所引起的TCP连接走代理通道。它是一种跳板程序。这个软件和sockscap、premo、eborder异曲同工。2.0版支持SOCKS4、SOCKS5、HTTP类的代理。认证方法：socks-“user/pass”，http-“basic_proxychains是什么

随便推点

Oracle游标：处理查询结果集的好工具_oracle查询游标结果集-程序员宅基地

文章浏览阅读273次。通过显式游标和隐式游标，我们可以方便地在数据库程序中处理查询结果集，实现复杂的业务逻辑。_oracle查询游标结果集

计算机主机箱内的硬件设备主要有哪些,电脑主机有哪些硬件设备-程序员宅基地

文章浏览阅读5.6k次。电脑主机有哪些硬件设备导语：在台式电脑，我们能看到的最基本的硬件就是一个显示器和主机，然后还包括键盘、鼠标。这样一个基本的电脑就完全了。以下是小编精心整理的电脑硬件知识，希望对您有所帮助。主机上面又分为以下几种硬件：1、主板;主板在主机上是一个板块，它是将电脑上的其他硬件连接在一起，最后在电脑启动的时候，主板上的信息就会传输到电脑上显示出来。2、cpu，cpu处理器的话可能你也已经有所了解了。其实..._主机的硬件设备有哪些

Oracle触发器原理、创建、修改、删除_用oracle创建一个instead of触发器,当在course表中删除数据,不允许在course-程序员宅基地

文章浏览阅读3.7k次，点赞2次，收藏7次。本篇主要内容如下：8.1 触发器类型8.1.1 DML触发器8.1.2 替代触发器8.1.3 系统触发器8.2创建触发器8.2.1 触发器触发次序8.2.2 创建DML触发器8.2.3 创建替代(INSTEAD OF)触发器8.2.3 创建系统事件触发器8.2.4 系统触发器事件属性8.2.5 使用触发器谓词8.2.6 重新编译触发器8.3删除和使用触发器8.4触发器和数据字典8.5数据库触发器的应用举例8.6 触发器的查看8...._用oracle创建一个instead of触发器,当在course表中删除数据,不允许在course表

计算机科学与技术网上书店,计算机科学与技术毕业论文：基于web的网上书店.doc...-程序员宅基地

文章浏览阅读188次。本科毕业论文(设计)题　　目　　基于web的网上书店学生姓名专业名称　　计算机科学与技术指导教师目录1、引言52、系统概述62.1概述62.2 开发平台73.需求分析73.1总体需求描述73.2系统总体功能图73.3系统需要实现的功能83.4业务流程图94.详细设计114.1数据库详细设计114.2建立数据库124.3页面详细设计：185用户手册225.1普通用户：225.2管理员：24参考文献3..._计算机科学与技术毕业设计网上书店

素数求和_输入一个正整数n和n个正整数,统计其中素数的和。-程序员宅基地

文章浏览阅读1.6k次。Description输入一个正整数N和N个正整数，统计其中素数的和。Input输入一个正整数N（1≤N≤100）和N个正整数（≥3），用空格分隔。Output输出所有素数，用空格隔开；再输出这些素数和。Sample Input10 4 5 8 12 13 24 34 37 20 885 1 5 8 12 13Sample Output5 13 37 s=555 13 s=..._输入一个正整数n和n个正整数,统计其中素数的和。

Oracle DB 使用RMAN创建备份2_rman 备份 生成两个文件-程序员宅基地

文章浏览阅读2.5k次。归档备份：概念归档备份：概念 如果需要在指定时间内保留联机备份，RMAN 通常会假定用户可能需要在自执行该备份以来到现在之间的任意时间执行时间点恢复。为了满足这一要求，RMAN 会在此时段内保留归档日志。但是，可能仅需要在指定的时间（如两年）内保留特定备份（并使其保持一致和可恢复）。用户不打算恢复到自执行该备份以后的某一时间点，只是希望能够正好恢复到执行该备_rman 备份 生成两个文件

推荐文章

热门文章

相关标签