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

②使用插件