一、第一种
vue移动端（PC端）图形验证码vue2-verify前往地址 常规验证码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-verifygitee镜像地址：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(); }, } }