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。

相关文章

前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
Goland debug失效详细解决步骤(合集)

Goland debug失效详细解决步骤(合集)

《Golanddebug失效详细解决步骤(合集)》今天用Goland开发时,打断点,以debug方式运行,发现程序并没有断住,程序跳过了断点,直接运行结束,网上搜寻了大量文章,最后得以解决,特此在这... 目录Bug：Goland debug失效详细解决步骤【合集】情况一：Go或Goland架构不对情况二：
阅读更多...
Python itertools中accumulate函数用法及使用运用详细讲解

Python itertools中accumulate函数用法及使用运用详细讲解

《Pythonitertools中accumulate函数用法及使用运用详细讲解》：本文主要介绍Python的itertools库中的accumulate函数,该函数可以计算累积和或通过指定函数... 目录1.1前言：1.2定义：1.3衍生用法：1.3Leetcode的实际运用:总结 1.1前言：本文将详
阅读更多...
Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll
阅读更多...
Spring Boot整合log4j2日志配置的详细教程

Spring Boot整合log4j2日志配置的详细教程

《SpringBoot整合log4j2日志配置的详细教程》：本文主要介绍SpringBoot项目中整合Log4j2日志框架的步骤和配置,包括常用日志框架的比较、配置参数介绍、Log4j2配置详解... 目录前言一、常用日志框架二、配置参数介绍1. 日志级别2. 输出形式3. 日志格式3.1 PatternL
阅读更多...
Springboot 中使用Sentinel的详细步骤

Springboot 中使用Sentinel的详细步骤

《Springboot中使用Sentinel的详细步骤》文章介绍了如何在SpringBoot中使用Sentinel进行限流和熔断降级,首先添加依赖,配置Sentinel控制台地址,定义受保护的资源,... 目录步骤 1: 添加 Sentinel 依赖步骤 2: 配置 Sentinel步骤 3: 定义受保护的
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
本地私有化部署DeepSeek模型的详细教程

本地私有化部署DeepSeek模型的详细教程

《本地私有化部署DeepSeek模型的详细教程》DeepSeek模型是一种强大的语言模型,本地私有化部署可以让用户在自己的环境中安全、高效地使用该模型,避免数据传输到外部带来的安全风险,同时也能根据自... 目录一、引言二、环境准备（一）硬件要求（二）软件要求（三）创建虚拟环境三、安装依赖库四、获取 Dee
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2