开源项目地址：monoplasty/vue3-slide-verify
安装命令：
npm install --save vue3-slide-verify在登录页面添加代码：
<template>
<!-- 登录验证码对话框 -->
<el-dialog v-model="dialogVisible" title="验证码" width="500"><div><slide-verify ref="block" :slider-text="'向右拖动--->'" :accuracy="3" :imgs="imgArr" @again="onAgain"@success="onSuccess" @fail="onFail" @refresh="onRefresh"></slide-verify><!-- <el-button type="primary" @click="handleClick">刷新图片</el-button> --><div>{{ msg }}</div></div>
</el-dialog>
</template>引入验证码类型：
import SlideVerify from 'vue3-slide-verify';
import "vue3-slide-verify/dist/style.css";登录页面完整代码：
<template><el-card class="mylogin" style="max-width: 400px"><template #header><div class="card-header"><img src="@/assets/login.png"></div></template><!-- hide-required-asterisk：在Element UI中隐藏必填项的红色星号 --><el-form ref="loginFormRef" :model="loginForm" :rules="rules" hide-required-asterisk label-width="60"style="max-width: 600px"><el-form-item label="用户名" prop="username"><el-input v-model="loginForm.username" placeholder="请输入用户名" clearable /></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" placeholder="请输入密码" show-password v-model="loginForm.password" clearable /></el-form-item><el-form-item><el-button color="#626aef" type="primary" @click="loginSubmit">登录</el-button><el-button color="#626aef" plain @click="resetSubmit">重置</el-button></el-form-item></el-form></el-card><!-- 登录验证码对话框 --><!-- accuracy灵敏度：默认取值范围为 [1, 10] --><el-dialog v-model="dialogVisible" title="验证码" width="500"><div><slide-verify ref="block" :slider-text="'向右拖动--->'" :accuracy="3" :imgs="imgArr" @again="onAgain"@success="onSuccess" @fail="onFail" @refresh="onRefresh"></slide-verify><!-- <el-button type="primary" @click="handleClick">刷新图片</el-button> --><div>{{ msg }}</div></div></el-dialog></template><script setup>
import { ref, reactive, onMounted } from 'vue'
import { get, post } from '@/myaxios'
import router from '@/router'
import { ElMessage } from 'element-plus'// 引入验证码类型
import SlideVerify from 'vue3-slide-verify';
import "vue3-slide-verify/dist/style.css";const dialogVisible = ref(false)const imgArr = reactive(['https://monoplasty.github.io/vue3-slide-verify/assets/img4.708137a5.jpg','https://monoplasty.github.io/vue3-slide-verify/assets/img5.96696b7b.jpg','https://monoplasty.github.io/vue3-slide-verify/assets/img2.3217378f.jpg','https://monoplasty.github.io/vue3-slide-verify/assets/img2.3217378f.jpg'
])const msg = ref("");
const block = ref();const onAgain = () => {msg.value = "检测到非人为操作的哦！ try again";// 刷新block.value.refresh();
};const onSuccess = async (times) => {msg.value = `登录成功, 耗时${(times / 1000).toFixed(1)}s`;dialogVisible.value = false// 关闭对话框并刷新图片block.value.refresh();// 校验通过再提交let resp = await post('/login', loginForm)// 根据结果处理服务端响应if (resp.data.returnCode == 20010) {// 成功，弹绿窗 跳页面ElMessage.success(resp.data.returnMsg)// 存用户信息let loginUserStr = JSON.stringify(resp.data.returnData)console.log(loginUserStr);// 存入sessionStoragesessionStorage.setItem('loginUser', loginUserStr)// 跳页面router.push('/main')} else if (resp.data.returnCode == 20011) {ElMessage.error(resp.data.returnMsg)} else if (resp.data.returnCode == 20012) {ElMessage.info(resp.data.returnMsg)} else if (resp.data.returnCode == 20013) {ElMessage.warning(resp.data.returnMsg)}
};const onFail = () => {msg.value = "验证不通过";
};const onRefresh = () => {msg.value = "点击了刷新小图标";
};const handleClick = () => {// 刷新block.value.refresh();msg.value = "";
};// 获得登录的表单对象 可以调用表单的函数
const loginFormRef = ref()// 登录功能
// 登录数据表单
const loginForm = reactive({username: '测试1',password: 'abc123'
})// 登录提交，向后端发送请求
const loginSubmit = async () => {// 校验通过才能向后端发送请求loginFormRef.value.validate(async (valid) => {if (valid) {dialogVisible.value = true} else {console.log('error submit!')}})
}// 表单校验
const rules = reactive({username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 8, message: '密码长度为6-8位之间', trigger: 'blur' },],
})// 重置按钮
const resetSubmit = () => {loginFormRef.value.resetFields()
}
</script><style scoped>
.mylogin {margin: 15% auto;/* transparent：透明色 */background-color: #adaef3;
}
</style>
)
