一， vue-puzzle-vcode插件
1、安装vue-puzzle-vcode2，实现代码 3，效果图
二， vue2-verify
三，vue-monoplasty-slide-verify
1，安装2，实现3，效果图
一， vue-puzzle-vcode插件
GitHub地址：https://gitee.com/beeworkshop/vue-puzzle-vcode?_from=gitee_search
1、安装vue-puzzle-vcode
cnpm i -S vue-puzzle-vcode
2，实现代码
<template><div><Vcode :show="isShow" @success="success" @close="close" /><el-button @click="submit">登录</el-button></div>
</template><script>
import Vcode from "vue-puzzle-vcode";
export default {data() {return {isShow: true // 验证码模态框是否出现};},components: {Vcode},methods: {submit() {this.isShow = true;},// 用户通过了验证success(msg) {this.isShow = false; // 通过验证后，需要手动隐藏模态框},// 用户点击遮罩层，应该关闭模态框close() {this.isShow = false;}}
};
</script>
3，效果图
此外，这里还有一些属性，比如宽，高等，见：https://gitee.com/beeworkshop/vue-puzzle-vcode?_from=gitee_search
二， vue2-verify
GitHub：https://github.com/mizuka-wu/vue2-verify
vue2-verify的组件功能很全，包括5种验证功能，如下：
- 常规验证码picture 常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。
- 运算验证码compute 运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。
- 滑动验证码slide 通过简单的滑动即可完成验证，应用与移动端体验很好。
- 拼图验证码puzzle 拼图。
- 选字验证码pick 通过按顺序点选图中的汉字完成验证，ie浏览器要求9或以上。
如果需要定制化验证码，那么可以选择这个插件，如果对验证码要求不高，使用vue-puzzle-vcode更方便一点
三，vue-monoplasty-slide-verify
gitee地址：https://gitee.com/monoplasty/vue-monoplasty-slide-verify
1，安装
cnpm install -S vue-monoplasty-slide-verify
2，实现
// 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时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5accuracy: 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();},}
}
这个体验感觉不太好，尤其是刷新背景图时会有一段时间的空白，但好在它可以计算出验证过程的耗时
