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 = false
new 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）：
| 字段 | 类型 | 描述 |
|---|---|---|
| l | Number | 图中块的长度 |
| r | Number | 图中块的圆角 |
| w | Number | 画布宽度 |
| h | Number | 画布高度 |
| sliderText | String | 提示文字 |
| imgs | Array | 背景图数组，默认值 [] |
| accuracy | Number | 滑动验证的误差范围，默认值 5 |
| show | Boolean | 是否显示刷新按钮，默认值 true |
事件（Func）：
| 名称 | 类型 | 描述 |
|---|---|---|
| success | Function | 成功后返回用时时间，单位为毫秒 |
| fail | Function | 失败之后的回调函数 |
| refresh | Function | 点击刷新按钮后的回调函数 |
| again | Function | 检测到非人为操作滑动时触发的回调函数 |
| fulfilled | Function | 刷新成功之后的回调函数 |
内置方法：
在父组件里如果需要重置，可以在父组件中调用子组件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）：
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| show | Boolean | false | 是否显示验证码弹框 |
| type | String | “modal” | "modal"模态框形式 / "inside"内嵌形式 |
| canvasWidth | Number | 310 | 主图区域的宽度，单位 px |
| canvasHeight | Number | 160 | 主图区域的高度，单位 px |
| puzzleScale | Number | 1 | 拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大 |
| sliderSize | Number | 50 | 左下角用户拖动的那个滑块的尺寸，单位 px |
| range | Number | 10 | 判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合 |
| imgs | Array | null | 自定义图片，见下方例子 |
| successText | String | “验证通过！” | 验证成功时的提示文字 |
| failText | String | “验证失败，请重试” | 验证失败时的提示文字 |
| sliderText | String | “拖动滑块完成拼图” | 下方滑动条里的文字 |
| className | String | “” | 给根元素一个class类用于自定义样式 |
| zIndex | Number | 999 | 设置根元素一个层级z-index |
事件（Func）：
| 名称 | 返回值 | 描述 |
|---|---|---|
| success | 偏差值 | 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px |
| fail | 偏差值 | 验证失败时会触发，返回值同上 |
| close | null | 用户点击遮罩层的回调 |
| reset | null | 用户手动点击右上角刷新按钮时触发的回调 |
内置方法：
<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
