前端页面图片滑动验证

安装命令：

bash 复制代码

npm install --save vue3-slide-verify

在登录页面添加代码：

javascript 复制代码

<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>

引入验证码类型：

javascript 复制代码

import SlideVerify from 'vue3-slide-verify';
import "vue3-slide-verify/dist/style.css";

登录页面完整代码：

javascript 复制代码

<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);
        // 存入sessionStorage
        sessionStorage.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>