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。

相关文章

线上Java OOM问题定位与解决方案超详细解析

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,：本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具
阅读更多...
基于 Cursor 开发 Spring Boot 项目详细攻略

基于 Cursor 开发 Spring Boot 项目详细攻略

《基于Cursor开发SpringBoot项目详细攻略》Cursor是集成GPT4、Claude3.5等LLM的VSCode类AI编程工具,支持SpringBoot项目开发全流程,涵盖环境配... 目录cursor是什么？基于 Cursor 开发 Spring Boot 项目完整指南1. 环境准备2. 创建
阅读更多...
Vue和React受控组件的区别小结

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一：直接修改事件参数写法二：通过ref引用 DOMVu
阅读更多...
Java实现将HTML文件与字符串转换为图片

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现：html 转图片完整代码场景 1：转换本地 HTML 文件为图片场景 2：转换 H
阅读更多...
C#使用Spire.Doc for .NET实现HTML转Word的高效方案

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1
阅读更多...
Vue3绑定props默认值问题

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1：使用 defineProps 定义 Props步骤2：设置默认值总结前言使用T
阅读更多...
Python与MySQL实现数据库实时同步的详细步骤

Python与MySQL实现数据库实时同步的详细步骤

《Python与MySQL实现数据库实时同步的详细步骤》在日常开发中,数据同步是一项常见的需求,本篇文章将使用Python和MySQL来实现数据库实时同步,我们将围绕数据变更捕获、数据处理和数据写入这... 目录前言摘要概述：数据同步方案1. 基本思路2. mysql Binlog 简介实现步骤与代码示例1
阅读更多...
基于C#实现PDF转图片的详细教程

基于C#实现PDF转图片的详细教程

《基于C#实现PDF转图片的详细教程》在数字化办公场景中,PDF文件的可视化处理需求日益增长,本文将围绕Spire.PDFfor.NET这一工具,详解如何通过C#将PDF转换为JPG、PNG等主流图片... 目录引言一、组件部署二、快速入门：PDF 转图片的核心 C# 代码三、分辨率设置 - 清晰度的决定因
阅读更多...
Java中HashMap的用法详细介绍

Java中HashMap的用法详细介绍

《Java中HashMap的用法详细介绍》JavaHashMap是一种高效的数据结构,用于存储键值对,它是基于哈希表实现的,提供快速的插入、删除和查找操作,：本文主要介绍Java中HashMap... 目录一.HashMap1.基本概念2.底层数据结构：3.HashCode和equals方法为什么重写Has
阅读更多...
Java使用正则提取字符串中的内容的详细步骤

Java使用正则提取字符串中的内容的详细步骤

《Java使用正则提取字符串中的内容的详细步骤》：本文主要介绍Java中使用正则表达式提取字符串内容的方法,通过Pattern和Matcher类实现,涵盖编译正则、查找匹配、分组捕获、数字与邮箱提... 目录1. 基础流程2. 关键方法说明3. 常见场景示例场景1：提取所有数字场景2：提取邮箱地址4. 高级
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2