因为公司要做防刷，所以要验证码功能，于是又在网上找，看了一圈都是需要收费的，最后同事找了一个纯前端的开源，免费的验证码插件Verify，Verify的github地址: https://github.com/Hibear/verify，但是毕竟不需要后端配合，对安全性要求不高的可以安利一下
验证码效果图
验证码图片
Verify使用
Verify的资源包下载，注意使用时还要引入下载包中的images、fonts文件夹。
<!-- index.html -->
<head>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/verify.min.js"></script>
</head>
<!-- main.js -->
import './assets/css/verify.css' //验证码
为了方便使用，抽出来做组件mpanel.vue，并根据自己的需求改了验证码的样式
<!-- mpanel.vue -->
<template>
<transition name="fade">
<div class="modal-box">
<div class="modal-content">
<!--头部-->
<div class="modal-header">
<p class="title">验证码验证</p>
<a @click="onCancel"
class="modal-close"
href="javascript:void(0)">
<x-icon type="ios-close"
size="30"></x-icon>
</a>
</div>
<!--内容区域-->
<div class="modal-body">
<div id="mpanel"
ref="mpanel">
</div>
<div id="check-btn" class="verify-btn">确定</div>
</div>
<!--尾部,操作按钮 -->
<!-- <div class="modal-footer">
</div> -->
</div>
</div>
</transition>
</template>
<script>
import { XDialog, TransferDomDirective as TransferDom } from 'vux'
export default {
name: 'mpanel',
data() {
return {
path: null
}
},
mounted() {
this.initMpanel();
},
methods: {
onCancel() {
this.$emit('close');
},
// 提示框
showToolTip(text, timeout = 2000) {
this.$vux.toast.text(text);
},
// 验证
initMpanel() {
this.codeVerify() //运算验证码
// this.slideVerify() //拼图验证码
// this.pointsVerify() //拼字验证码
},
// 运算验证码
codeVerify() { // https://veui.net/document/index
let _this = this
$('#mpanel').codeVerify({
type: 2,
figure: 100,
arith: 0,
width: '100%',
height: '50px',
fontSize: '30px',
btnId: 'check-btn',
ready: function () {
},
success: function () {
_this.showToolTip("验证成功！")
// 向父组件传值
_this.$emit('success');
},
error: function () {
_this.showToolTip("验证码不匹配！")
}
});
},
// 拼图验证码
slideVerify() { // https://veui.net/document/index
let _this = this
$('#mpanel').slideVerify({
type: 2,
mode: 'pop',
vOffset: 5,
vSpace: 5,
explain: '向右滑动完成验证',
imgUrl: 'http://txh-cdn.96qbhy.com/',
imgName: ['20181010170653M58v1KlH.jpg', '20181010170719McH7EkZK.jpg'],
imgSize: {
width: '100%',
height: '200px',
},
blockSize: {
width: '40px',
height: '40px',
},
barSize: {
width: '100%',
height: '40px',
},
ready: function () {
},
success: function () {
_this.showToolTip("验证成功！")
// 向父组件传值
_this.$emit('success');
},
error: function () {
_this.showToolTip("验证码不匹配！")
}
});
},
// 拼字验证码
pointsVerify() { // https://veui.net/document/index
let _this = this
$('#mpanel').pointsVerify({
mode: 'pop',
defaultNum: 4,
checkNum: 2,
vSpace: 5,
imgUrl: 'http://txh-cdn.96qbhy.com/',
imgName: ['20181010170653M58v1KlH.jpg', '20181010170719McH7EkZK.jpg'],
imgSize: {
width: '100%',
height: '200px',
},
barSize: {
width: '100%',
height: '40px',
},
ready: function () {
},
success: function () {
_this.showToolTip("验证成功！")
// 向父组件传值
_this.$emit('success');
},
error: function () {
_this.showToolTip("验证码不匹配！")
}
});
}
}
}
</script>
<style scoped>
.modal-box {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
left: 0;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
width: 300px;
/* background: #fff; */
border-radius: 10px;
box-sizing: border-box;
font-size: 13px;
}
.modal-header {
text-align: center;
border: 0;
}
.modal-header .title {
font-size: 20px;
font-weight: 550;
}
.modal-body{
margin-top: -25px;
}
.modal-close {
position: absolute;
right: -10px;
top: -15px;
color: #999494;
font-size: 14px;
}
.fade-enter-active {
animation: fade-in 0.5s;
}
.fade-leave-active {
animation: fade-in 0.5s reverse;
}
@keyframes fade-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
验证码组件引用
<!-- home.vue -->
</template>
...
<!-- 验证码 start -->
<mpanel v-if="mpanelShow"
@close="mpanelShow = false"
@success="onMpanelSuccess"></mpanel>
<!-- 验证码 end -->
...
</template>
<script>
import Mpanel from 'Components/mpanel/mpanel' //验证码
export default {
data() {
return {
mpanelShow: false, //验证码是否显示
}
},
methods: {
// 是否要验证
checkVerifyCodeApi(options) {
checkVerifyCode(options).then(res => {
if (res.data && res.data.code === 0) {
//不要验证执行代码
} else {
//需要验证码,弹窗显示
this.mpanelShow = true;
}
})
},
// 验证通过
onMpanelSuccess() {
this.mpanelShow = false;
//执行代码
}
}
}
