Vue - 详细介绍 vue-monoplasty-slide-verify vue3-puzzle-vcode 滑动验证组件

2024-08-21 04:36
文章标签 javascript 组件 介绍 vue vue3 验证 详细 frontend 滑动 puzzle slide verify monoplasty vcode

本文主要是介绍Vue - 详细介绍 vue-monoplasty-slide-verify vue3-puzzle-vcode 滑动验证组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue - 详细介绍 vue-monoplasty-slide-verify & vue3-puzzle-vcode 滑动验证组件

在日常的账号登录所需要的大部分是滑动验证来检验人为操作，免于字母验证码的繁琐输入，下面介绍在Vue2和Vue3中适用的滑动验证组件。

1、vue-monoplasty-slide-verify（Vue2）

安装：

npm install --save vue-monoplasty-slide-verify

引用（在main.js中）：

import Vue from 'vue'
import App from './App.vue'// 滑动验证组件
import SlideVerify from 'vue-monoplasty-slide-verify'; 
Vue.use(SlideVerify)Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

使用（建议搭配其他UI组件库的弹出层或弹窗使用）：

<template><div id="app"><div class="box_slide_verify"><slide-verify:l="42":r="10":w="310":h="155":imgs="imgs"slider-text="向右滑动"@success="onSuccess"@fail="onFail"@refresh="onRefresh"></slide-verify></div><div class="box_msg">{{ msg }}</div></div>
</template><script>
export default {data() {return {msg: "",imgs: ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F0406210Z024%2F2104060Z024-11-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050452&t=a8eeec2f6f7b4aff883b85ee2276ea4d","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668047974&t=0545a1395151b9e52e3ae13d4c1f3a9d","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F033021091503%2F210330091503-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050510&t=b07c3793fe21bd8cb17e2490a11b664d","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050503&t=63bbb5a9c3ac56b66f20240b63e98f34",],};},methods: {onSuccess() {this.msg = "验证成功！";setTimeout(() => {this.onRefresh();}, 1000);},onFail() {this.msg = "验证失败，请重新验证！";setTimeout(() => {this.onRefresh();}, 1000);},onRefresh() {this.msg = "";},},
};
</script><style lang="less">
#app {background: #f5f5f5;width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;flex-direction: column;.box_slide_verify {background: white;padding: 20px;border-radius: 5px;box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.1);}.box_msg {margin-top: 20px;}
}
</style>

在这里插入图片描述
属性（Props）：

字段类型描述
lNumber图中块的长度
rNumber图中块的圆角
wNumber画布宽度
hNumber画布高度
sliderTextString提示文字
imgsArray背景图数组，默认值 []
accuracyNumber滑动验证的误差范围，默认值 5
showBoolean是否显示刷新按钮，默认值 true

事件（Func）：

名称类型描述
successFunction成功后返回用时时间，单位为毫秒
failFunction失败之后的回调函数
refreshFunction点击刷新按钮后的回调函数
againFunction检测到非人为操作滑动时触发的回调函数
fulfilledFunction刷新成功之后的回调函数

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

<template>
<slide-verify ref="slideblock" ></slide-verify>
</template><script>
export default {mounted(){this.$refs.slideblock.reset();},
}
</script>

2、vue3-puzzle-vcode（Vue2&Vue3）

安装：

// vue2
npm install vue-puzzle-vcode --save// vue3
npm install vue3-puzzle-vcode --save

引用并使用（演示Vue3）：

<template><div class="box"><div class="box_Vcode"><Vcode :show="isShow" @success="onSuccess" type="inside" @close="onClose" /></div><button @click="onShow">开始验证</button></div>
</template><script setup>
import { ref } from "vue";
import Vcode from "vue3-puzzle-vcode";const isShow = ref(false);const onShow = () => {isShow.value = !isShow.value;
};const onClose = () => {isShow.value = false;
};const onSuccess = () => {onClose(); // 验证成功，手动关闭模态框
};
</script><style scoped>
.box {display: flex;justify-content: center;align-items: center;height: 100vh;flex-direction: column;background: #f5f5f5;
}
.box_Vcode{background: white;padding: 20px;border-radius: 5px;box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.1);}
button{margin-top: 20px;
}
</style>

在这里插入图片描述
并可传入图片数组：

<template><div class="box"><div class="box_Vcode"><Vcode :show="isShow" @success="onSuccess" type="inside" @close="onClose" :imgs="imgs" /></div><button @click="onShow">开始验证</button></div>
</template><script setup>
import { ref } from "vue";
import Vcode from "vue3-puzzle-vcode";
const isShow = ref(false);const imgs = ref(["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F0406210Z024%2F2104060Z024-11-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050452&t=a8eeec2f6f7b4aff883b85ee2276ea4d","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668047974&t=0545a1395151b9e52e3ae13d4c1f3a9d","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F033021091503%2F210330091503-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050510&t=b07c3793fe21bd8cb17e2490a11b664d","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050503&t=63bbb5a9c3ac56b66f20240b63e98f34",
]);const onShow = () => {isShow.value = !isShow.value;
};const onClose = () => {isShow.value = false;
};const onSuccess = () => {onClose(); // 验证成功，手动关闭模态框
};
</script><style scoped>
.box {display: flex;justify-content: center;align-items: center;height: 100vh;flex-direction: column;background: #f5f5f5;
}
.box_Vcode{background: white;padding: 20px;border-radius: 5px;box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.1);}
button{margin-top: 20px;
}
</style>

在这里插入图片描述

属性（Props）：

字段类型默认值说明
showBooleanfalse是否显示验证码弹框
typeString“modal”"modal"模态框形式 / "inside"内嵌形式
canvasWidthNumber310主图区域的宽度，单位 px
canvasHeightNumber160主图区域的高度，单位 px
puzzleScaleNumber1拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大
sliderSizeNumber50左下角用户拖动的那个滑块的尺寸，单位 px
rangeNumber10判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合
imgsArraynull自定义图片，见下方例子
successTextString“验证通过！”验证成功时的提示文字
failTextString“验证失败，请重试”验证失败时的提示文字
sliderTextString“拖动滑块完成拼图”下方滑动条里的文字
classNameString“”给根元素一个class类用于自定义样式
zIndexNumber999设置根元素一个层级z-index

事件（Func）：

名称返回值描述
success偏差值验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px
fail偏差值验证失败时会触发，返回值同上
closenull用户点击遮罩层的回调
resetnull用户手动点击右上角刷新按钮时触发的回调

内置方法：

<template>
<Vcode ref="vcode" :show="true" />
</template><script setup>
const vcode = ref(null);
vcode.value.reset(); // 手动刷新内部状态
</script>

本篇详细介绍了两种滑动验证组件在Vue2和Vue3中的实际运用，对于实际项目中可以通过搭配其他UI组件库如Element - UI 的弹窗效果更佳，喜欢的小伙伴们可以点点赞收藏一下，这边都会一直整理各类Vue实用组件哒！

项目链接：
vue-monoplasty-slide-verify - gitee：vue-monoplasty-slide-verify - gitee
vue-puzzle-vcode - github：vue-puzzle-vcode - github
vue3-puzzle-vcode - github：vue3-puzzle-vcode - github

这篇关于Vue - 详细介绍 vue-monoplasty-slide-verify vue3-puzzle-vcode 滑动验证组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1092136。

相关文章

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,：本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式
阅读更多...
IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》：本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1：创建 Maven Web 项目步骤 2：添加 Spring MVC 依赖1、保存后执行2、将新的依赖
阅读更多...
如何为Yarn配置国内源的详细教程

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方
阅读更多...
最详细安装 PostgreSQL方法及常见问题解决

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》：本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.
阅读更多...
redis过期key的删除策略介绍

redis过期key的删除策略介绍

《redis过期key的删除策略介绍》：本文主要介绍redis过期key的删除策略,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录第一种策略：被动删除第二种策略：定期删除第三种策略：强制删除关于big key的清理UNLINK命令FLUSHALL/FLUSHDB命
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
MySql match against工具详细用法

MySql match against工具详细用法

《MySqlmatchagainst工具详细用法》在MySQL中,MATCH……AGAINST是全文索引（Full-Textindex）的查询语法,它允许你对文本进行高效的全文搜素,支持自然语言搜... 目录一、全文索引的基本概念二、创建全文索引三、自然语言搜索四、布尔搜索五、相关性排序六、全文索引的限制七
阅读更多...
python中各种常见文件的读写操作与类型转换详细指南

python中各种常见文件的读写操作与类型转换详细指南

《python中各种常见文件的读写操作与类型转换详细指南》这篇文章主要为大家详细介绍了python中各种常见文件（txt,xls,csv,sql,二进制文件）的读写操作与类型转换,感兴趣的小伙伴可以跟... 目录1.文件txt读写标准用法1.1写入文件1.2读取文件2. 二进制文件读取3. 大文件读取3.1
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2