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。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2