几种常见的注册登录验证(vue)
本文收集几种常见的注册登录验证源码，分别有滑动验证，拼图验证，组词验证。
滑动验证
git地址： https://gitee.com/monoplasty/vue-monoplasty-slide-verify
01.安装包：
npm i vue-monoplasty-slide-verify -S
02. main.js中导入并使用 ：
import SlideVerify from 'vue-monoplasty-slide-verify'
Vue.use(SlideVerify)
03.Template 模板中 ：
<el-card class="cover">
<slide-verify
:l="42"
:r="10"
:w="310"
:h="155"
slider-text="向右滑动"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh">
</slide-verify>
</el-card>
04.style中css ：
.cover{
width: fit-content;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1000;
}
05.js部分 ：
<script>
export default {
name: 'App',
data() {
return {
loginAdmin: {}
}
},
methods: {
onSuccess() { //滑块验证通过之后触发的
alert("验证成功")
// 下面是跳转首页代码
},
onFail() {
alert("验证失败")
},
onRefresh() {
}
}
}
</script>
到此，效果已出现。
简单滑动验证
01.安装包 ：
npm install vue-drag-verify -S
02.template代码 ：
<template>
<div id="app">
<drag-verify :width="width" :height="height" :text="text" :success-text="successText" :background="background"
:progress-bar-bg="progressBarBg" :completed-bg="completedBg" :handler-bg="handlerBg" :handler-icon="handlerIcon"
:text-size="textSize" :success-icon="successIcon" ref="Verify">
</drag-verify>
</div>
</template>
02.js代码（需component中注册） ：
<script>
import dragVerify from 'vue-drag-verify'
export default {
name: 'App',
components: { dragVerify },
data() {
return {
handlerIcon: "fa fa-angle-double-right",
successIcon: "fa fa-check",
background: "#cccccc",
progressBarBg: "#4b0",
completedBg: "#ff1234",
handlerBg: "#fff",
text: "请将滑块拖动到右侧",
successText: "验证成功",
width: 320,
height: 42,
textSize: "18px",
isCircle: 'true'
}
}
}
</script>
滑动验证合集（一个包，5种验证方式都包含）
文档地址 ： https://gitcode.net/mirrors/mizuka-wu/vue2-verify?utm_source=csdn_github_accelerator
01.安装包 ：
npm install vue2-verify -S
02.template代码（type值不同验证方式不同） ：
<Verify :type="1" @success="success"></Verify>
03.js代码 ：
<script>
import Verify from 'vue2-verify'
export default {
name: 'App',
components: {Verify},
data() {
return {
}
},
methods: {
success(e){
//成功后的返回
alert("成功")
}
}
}
</script>
———— type 值不同验证方式不同：
当type = 1
type = 2
type = 3
type = 4
type = 5
动动发财的手点个赞吧！
评论