vue3 实现登录验证码
vue3项目前提条件：已安装引入【element-plus】，【vue-router@4】，【sass】等
第一种：图形验证码实现方式
一、图形验证码效果展示：
1.1、验证码组件
在component的文件夹下创建Sidentify.vue，将以下代码全部复制
1.2、使用验证码组件
在login.vue页面中引入验证码组件
登录 第二种：滑动拼图实现方式
二、滑动拼图验证码效果展示：
2.1、下载插件：vue3-puzzle-vcode
npm install vue3-puzzle-vcode --save详情👉👉：vue3-puzzle-vcode - npm
2.2、使用验证码插件
在login.vue页面中引入验证码组件
登录 2.3、说明与备注
说明：页面默认是只显示登录按钮的，验证码模态框默认不显示，只有点击登录按钮后才显示验证码模态框，当验证通过是跳转到home首页（具体跳转页面可根据需求而定）
备注：此组件是有默认图片的，我是自定义引入了一个图片，可根据需求来确定是否自定义图片
自定义图片步骤：
第一步：在Vcode组件中加img
第二步：在assets文件夹下存放图片，并引入
如果是引入多张图片，可在img中添加，如：:img="[Img1,Img2]"
三、拓展：vue2 图形验证
利用组件【vue2-verify】 详情👉👉：vue2-verify - npm
3.1、支持验证码类型及事件说明
验证码类型
| 序号 | 类型 | 说明 |
| 1 | 常规验证码 type为picture或1 | 常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。 |
| 2 | 运算验证码 type为compute或2 | 运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。 |
| 3 | 滑动验证码 type为slide或3 | 通过简单的滑动即可完成验证，应用与移动端体验很好。 |
| 4 | 拼图验证码 type为puzzle或4 | 拼图。 |
| 5 | 选字验证码 type为pick或5 | 通过按顺序点选图中的汉字完成验证，ie浏览器要求9或以上。 |
事件说明
ready：验证码初始化成功的回调函数。
success：验证码匹配成功后的回调函数。
error：验证码匹配失败后的回调函数。
3.2、效果展示
3.3、具体实现
①下载插件：vue2-verify
npm i vue2-verify②使用插件
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！