vue3项目前提条件:已安装引入【element-plus】,【vue-router@4】,【sass】等
第一种:图形验证码实现方式
一、图形验证码效果展示:
1.1、验证码组件
在component的文件夹下创建Sidentify.vue,将以下代码全部复制
<template>
<div class="s-canvas">
<canvas id="s-canvas" :width="props.contentWidth" :height="props.contentHeight"></canvas>
</div>
</template>
<script setup>
import { onMounted, watch } from 'vue'
// eslint-disable-next-line no-undef
const props = defineProps({
identifyCode: {
type: String,
default: '1234'
},
fontSizeMin: {
type: Number,
default: 25
},
fontSizeMax: {
type: Number,
default: 35
},
backgroundColorMin: {
type: Number,
default: 255
},
backgroundColorMax: {
type: Number,
default: 255
},
colorMin: {
type: Number,
default: 0
},
colorMax: {
type: Number,
default: 160
},
lineColorMin: {
type: Number,
default: 40
},
lineColorMax: {
type: Number,
default: 180
},
dotColorMin: {
type: Number,
default: 0
},
dotColorMax: {
type: Number,
default: 255
},
contentWidth: {
type: Number,
default: 112
},
contentHeight: {
type: Number,
default: 40
}
})
// 生成一个随机数
const randomNum = (min, max) => {
return Math.floor(Math.random() * (max - min) + min)
}
// 生成一个随机的颜色
const randomColor = (min, max) => {
let r = randomNum(min, max)
let g = randomNum(min, max)
let b = randomNum(min, max)
return 'rgb(' + r + ',' + g + ',' + b + ')'
}
// 绘制干扰线
const drawLine = (ctx) => {
for (let i = 0; i < 5; i++) {
ctx.strokeStyle = randomColor(props.lineColorMin, props.lineColorMax)
ctx.beginPath()
ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))
ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))
ctx.stroke()
}
}
//在画布上显示数据
const drawText = (ctx, txt, i) => {
ctx.fillStyle = randomColor(props.colorMin, props.colorMax)
ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + 'px SimHei'
let x = (i + 1) * (props.contentWidth / (props.identifyCode.length + 1))
let y = randomNum(props.fontSizeMax, props.contentHeight - 5)
var deg = randomNum(-45, 45)
// 修改坐标原点和旋转角度
ctx.translate(x, y)
ctx.rotate((deg * Math.PI) / 180)
ctx.fillText(txt, 0, 0)
// 恢复坐标原点和旋转角度
ctx.rotate((-deg * Math.PI) / 180)
ctx.translate(-x, -y)
}
// 绘制干扰点
const drawDot = (ctx) => {
for (let i = 0; i < 80; i++) {
ctx.fillStyle = randomColor(0, 255)
ctx.beginPath()
ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI)
ctx.fill()
}
}
//画图
const drawPic = () => {
let canvas = document.getElementById('s-canvas')
let ctx = canvas.getContext('2d')
ctx.textBaseline = 'bottom'
// 绘制背景
ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax)
ctx.fillRect(0, 0, props.contentWidth, props.contentHeight)
// 绘制文字
for (let i = 0; i < props.identifyCode.length; i++) {
drawText(ctx, props.identifyCode[i], i)
}
drawLine(ctx)
drawDot(ctx)
}
//组件挂载
onMounted(() => {
drawPic()
})
// 监听
watch(
() => props.identifyCode,
() => {
drawPic()
}
)
</script>
<style scoped lang="scss">
.s-canvas {
cursor: pointer;
}
</style>
1.2、使用验证码组件
在login.vue页面中引入验证码组件
<template>
<div class="login-page">
<el-form label-width="65px">
<el-form-item label="验证码">
<el-input placeholder="请输入验证码" v-model="sidentifyMode" clearable></el-input>
</el-form-item>
<!-- 使用验证码组件 -->
<div class="code" @click="refreshCode">
<SIdentify :identifyCode="identifyCode"></SIdentify>
</div>
<el-button class="login_btn" type="primary" size="default" @click="login">登录</el-button>
</el-form>
</div>
</template>
<script setup>
import SIdentify from '@/components/Sidentify'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
//获取路由器
let $router = useRouter()
let sidentifyMode = ref('') //输入框验证码
let identifyCode = ref('') //图形验证码
let identifyCodes = ref('1234567890abcdefjhijklinopqrsduvwxyz') //验证码出现的数字和字母
//组件挂载
onMounted(() => {
identifyCode.value = ''
makeCode(identifyCodes.value, 4)
})
// 生成随机数
const randomNum = (min, max) => {
max = max + 1
return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
for (let i = 0; i < l; i++) {
identifyCode.value += o[randomNum(0, o.length)]
}
}
// 更新验证码
const refreshCode = () => {
identifyCode.value = ''
makeCode(identifyCodes.value, 4)
}
//登录
const login = () => {
//验证验证码不为空
if (!sidentifyMode.value) {
ElMessage({ type: 'error', message: '验证码不能为空!' })
return
}
//验证验证码是否正确
if (sidentifyMode.value != identifyCode.value) {
ElMessage({ type: 'error', message: '验证码错误' })
refreshCode()
return
} else {
ElMessage({ type: 'success', message: '登录成功' })
$router.push('/home')
}
}
</script>
<style lang="scss" scoped>
.login-page {
border: 1.5px solid rgb(123, 109, 30);
border-radius: 8px;
width: 400px;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
.code {
text-align: center;
margin-bottom: 10px;
}
.login_btn {
width: 100%;
}
}
</style>
第二种:滑动拼图实现方式
二、滑动拼图验证码效果展示:
2.1、下载插件:vue3-puzzle-vcode
npm install vue3-puzzle-vcode --save
2.2、使用验证码插件
在login.vue页面中引入验证码组件
<template>
<div>
<el-button type="primary" @click="login">登录</el-button>
<!-- 备注:imgs是自定义的背景图,没有使用默认图片 -->
<Vcode :show="isShow" @success="success" @close="close" @fail="fail" :imgs="[Img]"></Vcode>
</div>
</template>
<script setup>
//自定义背景图,自己准备一张图片,引入即可
import Img from '@/assets/img.jpg'
//引入'vue3-puzzle-vcode'插件
import Vcode from 'vue3-puzzle-vcode'
import { ref } from 'vue'
//引入路由
import { useRouter } from 'vue-router'
//获取路由器
let $router = useRouter()
//验证码模态框是否出现,默认不展示
const isShow = ref(false)
//登录按钮
const login = () => {
//展现验证码模态框
isShow.value = true
}
//用户通过了验证
const success = (msg) => {
isShow.value = false
console.log('验证通过' + msg)
//通过验证跳转到home首页
$router.push('/home')
}
//用户点击遮罩层,关闭模态框
const close = () => {
isShow.value = false
}
//用户验证失败
const fail = () => {
console.log('验证失败')
}
</script>
<style lang="scss" scoped></style>
2.3、说明与备注
说明:页面默认是只显示登录按钮的,验证码模态框默认不显示,只有点击登录按钮后才显示验证码模态框,当验证通过是跳转到home首页(具体跳转页面可根据需求而定)
备注:此组件是有默认图片的,我是自定义引入了一个图片,可根据需求来确定是否自定义图片
自定义图片步骤:
第一步:在Vcode组件中加imgs
第二步:在assets文件夹下存放图片,并引入
如果是引入多张图片,可在imgs中添加,如: :imgs="[Img1,Img2]"
备注:Vcode组件中的 :img 更改为 :imgs 👇👇👇
三、拓展: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
②使用插件
<template>
<!-- type可选值是1-5,根据类型选择 -->
<Verify :type="1"></Verify>
</template>
<script>
import Verify from 'vue2-verify'
export default {
name: 'app',
components: {
Verify
}
}
</script>
最后:👏👏😊😊😊👍👍