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。

相关文章

SQL Server数据库死锁处理超详细攻略

SQL Server数据库死锁处理超详细攻略

《SQLServer数据库死锁处理超详细攻略》SQLServer作为主流数据库管理系统,在高并发场景下可能面临死锁问题,影响系统性能和稳定性,这篇文章主要给大家介绍了关于SQLServer数据库死... 目录一、引言二、查询 Sqlserver 中造成死锁的 SPID三、用内置函数查询执行信息1. sp_w
阅读更多...
Python UV安装、升级、卸载详细步骤记录

Python UV安装、升级、卸载详细步骤记录

《PythonUV安装、升级、卸载详细步骤记录》：本文主要介绍PythonUV安装、升级、卸载的详细步骤,uv是Astral推出的下一代Python包与项目管理器,主打单一可执行文件、极致性能... 目录安装检查升级设置自动补全卸载UV 命令总结 官方文档详见：https://docs.astral.sh/
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
Python包管理工具核心指令uvx举例详细解析

Python包管理工具核心指令uvx举例详细解析

《Python包管理工具核心指令uvx举例详细解析》：本文主要介绍Python包管理工具核心指令uvx的相关资料,uvx是uv工具链中用于临时运行Python命令行工具的高效执行器,依托Rust实... 目录一、uvx 的定位与核心功能二、uvx 的典型应用场景三、uvx 与传统工具对比四、uvx 的技术实
阅读更多...
canal实现mysql数据同步的详细过程

canal实现mysql数据同步的详细过程

《canal实现mysql数据同步的详细过程》：本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的... 目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程

SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程

《SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程》LiteFlow是一款专注于逻辑驱动流程编排的轻量级框架,它以组件化方式快速构建和执行业务流程,有效解耦复杂业务逻辑,下面给大... 目录一、基础概念1.1 组件（Component）1.2 规则（Rule）1.3 上下文（Conte
阅读更多...
Springboot3+将ID转为JSON字符串的详细配置方案

Springboot3+将ID转为JSON字符串的详细配置方案

《Springboot3+将ID转为JSON字符串的详细配置方案》：本文主要介绍纯后端实现Long/BigIntegerID转为JSON字符串的详细配置方案,s基于SpringBoot3+和Spr... 目录1. 添加依赖2. 全局 Jackson 配置3. 精准控制（可选）4. OpenAPI (Spri
阅读更多...
MybatisPlus service接口功能介绍

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》：本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结：Lambda方法Service接口基本用法MyBATisP
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2