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>
智能推荐
C语言——数组逆置（内含递归实现）-程序员宅基地
文章浏览阅读5k次，点赞5次，收藏25次。一.什么是数组的逆置呢？int a[10]={1,2,3,4,5,6,7,8,9,10};将数组变为 a[10]={10,9,8,7,6,5,4,3,2,1};这就叫做数组的逆置。二.1.循环实现数组的逆置这个是我们在初学C语言时最容易的实现方法！a.通过for循环实现//通过循环完成对数组的逆置#include<stdio.h>#define size 10void Inversion(int[], int);int main(void){ i_数组逆置
esp32-cam Thonny 烧录以及通信-程序员宅基地
文章浏览阅读229次，点赞4次，收藏3次。链接：https://pan.baidu.com/s/1cBsrCJ_TATFsuVhVdr0VmA?IO1和GND不再短接。重新插拔一下，就可以了。
字符，字节和编码-程序员宅基地
文章浏览阅读39次。级别：中级摘要：本文介绍了字符与编码的发展过程，相关概念的正确理解。举例说明了一些实际应用中，编码的实现方法。然后，本文讲述了通常对字符与编码的几种误解，由于这些误解而导致乱码产生的原因，以及消除乱码的办法。本文的内容涵盖了“中文问题”，“乱码问题”。掌握编码问题的关键是正确地理解相关概念，编码所涉及的技术其实是很简单的。因此，阅读本文时需要慢读多想，多思考。引言“字符与编码”...
Linux 修改 ELF 解决 glibc 兼容性问题_glibc_private-程序员宅基地
文章浏览阅读1.1k次。Linux glibc 问题相信有不少 Linux 用户都碰到过运行第三方（非系统自带软件源）发布的程序时的 glibc 兼容性问题，这一般是由于当前 Linux 系统上的 GNU C 库（glibc）版本比较老导致的，例如我在 CentOS 6 64 位系统上运行某第三方闭源软件时会报：[root@centos6-dev ~]# ldd tester./tester: /lib64/libc.so.6: version `GLIBC_2.17' not found (required by._glibc_private
wxWidgets：常用表达式_wxwidget 正则表达式 非数字字符-程序员宅基地
文章浏览阅读282次。wxWidgets：常用表达式wxWidgets：常用表达式不同风味的正则表达式转义Escapes元语法匹配限制和兼容性基本正则表达式正则表达式字符名称wxWidgets：常用表达式一个正则表达式描述字符的字符串。这是一种匹配某些字符串但不匹配其他字符串的模式。不同风味的正则表达式POSIX 定义的正则表达式 (RE) 有两种形式：扩展正则表达式(ERE) 和基本正则表达式(BRE)。ERE 大致是传统egrep 的那些，而 BRE 大致是传统ed 的那些。这个实现增加了第三种风格：高级正则表达式_wxwidget 正则表达式 非数字字符
Java中普通for循环和增强for循环的对比_for循环10万数据需要时间-程序员宅基地
文章浏览阅读3.4k次，点赞5次，收藏11次。Java中普通for循环和增强for循环的对比_for循环10万数据需要时间
随便推点
Qt Creator 安装 VLD_qtcreater vld-程序员宅基地
文章浏览阅读509次。Qt Creator 安装 VLD2015-04-14 16:52:55你好L阅读数 2325更多分类专栏：qt版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/lin_jianbin/article/details/45044459一、环境说明1、VLD内存..._qtcreater vld
Linux 开发环境工具[zt]-程序员宅基地
文章浏览阅读120次。软件集成开发环境（代码编辑、浏览、编译、调试）Emacs http://www.gnu.org/software/emacs/Source-Navigator 5.2b2 http://sourceforge.net/projects/sourcenavAnjuta http://anjuta.sourceforge...._linux上安装flawfinder
java小易——Spring_spring的beanfactory是hashmap吗-程序员宅基地
文章浏览阅读109次。SpringIoC DI AOPspring底层用的是ConcurrentHashMap解耦合：工厂模式：需要一个模板控制反转 IoC将原来有动作发起者（Main）控制创建对象的行为改成由中间的工厂来创建对象的行为的过程叫做IoC一个类与工厂之间如果Ioc以后，这个时候，动作发起者（Main）已经不能明确的知道自己获得到的对象，是不是自己想要的对象了，因为这个对象的创建的权利与交给我这个对象的权利全部转移到了工厂上了所用包：DOM4j解析XML文件lazy-init = _spring的beanfactory是hashmap吗
温故而知新：部分常见的图像数学运算处理算法的用途_图像处理算啊-程序员宅基地
文章浏览阅读1.3k次，点赞29次，收藏24次。本文将图像处理中常用的数学运算算法及其对图像的作用做了个汇总介绍，有助于图像处理时针对对应场景快速选择合适的数学算法。_图像处理算啊
EM Agent Fatal agent error: State Manager failed at Startup_check agent status retcode=1-程序员宅基地
文章浏览阅读1.1k次。EM 不定期异常宕机，问题重复出现，之前几次因为忙于其它事，无力兼顾，等回头处理时，发现EM已恢复正常。这次问题又重现，准备彻底解决，过程如下：1. 重新启动EM失败，报错：/u01/oracle/agent/core/12.1.0.5.0/bin/emctl status agentOracle Enterprise Manager Cloud Control 12c Relea_check agent status retcode=1
JVM常用调优参数 ——JVM篇_jvm调优-程序员宅基地
文章浏览阅读1.9w次，点赞50次，收藏366次。JVM常用性能调优参数详解 在学习完整个JVM内容后，其实目标不仅是学习了解整个JVM的基础知识，而是为了进行JVM性能调优做准备，所以以下的内容就是来说说JVM性能调优的知识。一、性能调优 性能调优包含多个层次，比如：架构调优、代码调优、JVM调优、数据库调优、操作系统调优等等。 架构调优和代码调优是JVM调优的基础，其中架构调优是对系统影响最大的。性能调优基本上按照以下步骤进行：明确优化目标发现性能瓶颈性能调优通过监控及数据统计工具获得数据确认是否达到目标二、何时进_jvm调优