一、第一种
vue移动端(PC端)图形验证码
vue2-verify
地址:https://www.npmjs.com/package/vue2-verify/v/1.0.2
常规验证码picture 常规的验证码由数字和字母构成,用户输入不区分大小写,可变形成汉字验证。
运算验证码compute 运算验证码主要通过给出数字的加减乘运算,填写运算结果进行验证。
滑动验证码slide 通过简单的滑动即可完成验证,应用与移动端体验很好。
拼图验证码puzzle 拼图。
选字验证码pick 通过按顺序点选图中的汉字完成验证,ie浏览器要求9或以上。
<Verify @success="onSuccess" @error="onFail" :type="5" :imgSize="imgSize" :imgUrl="imgUrl" :imgName="imgName" :mode="pop" :barSize="barSize" :showButton="showButton"></Verify>
------------------------script------------------------------
import Verify from 'vue2-verify';
components: {
Verify
},
------------------------options------------------------------------
ready 验证码初始化成功的回调函数。
success 验证码匹配成功后的回调函数。如要重新初始化:success:function(obj){obj.refresh();}。
error 验证码匹配失败后的回调函数。
**其他配置项去上面地址查看**
二、第二种(vue)
slide-verify(一款拼图验证码)
图片建议传、不传的话默认图片加载非常慢
github文档地址: https://github.com/monoplasty/vue-monoplasty-slide-verify
gitee镜像地址:https://gitee.com/monoplasty/vue-monoplasty-slide-verify
//demo
// main.js(全局引入也可以局部引入)
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
// template
<slide-verify
ref="slideblock"
@again="onAgain"
@fulfilled="onFulfilled"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:accuracy="accuracy"
:slider-text="text"
></slide-verify>
<div>{{msg}}</div>
<button @click="handleClick">在父组件可以点我刷新哦</button>
// script
export default {
name: 'App',
data(){
return {
msg: '',
text: '向右滑',
// 精确度小,可允许的误差范围小;为1时,则表示滑块要与凹槽完全重叠,才能验证成功。默认值为5
accuracy: 1,
}
},
methods: {
onSuccess(times){
console.log('验证通过,耗时 +' times + '毫秒');
this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
},
onFail(){
console.log('验证不通过');
this.msg = ''
},
onRefresh(){
console.log('点击了刷新小图标');
this.msg = ''
},
onFulfilled() {
console.log('刷新成功啦!');
},
onAgain() {
console.log('检测到非人为操作的哦!');
this.msg = 'try again';
// 刷新
this.$refs.slideblock.reset();
},
handleClick() {
// 父组件直接可以调用刷新方法
this.$refs.slideblock.reset();
},
}
}