vue3+ts 登陆页面，前端实现滑块验证

最新推荐文章于 2024-07-09 16:24:56 发布

小南瓜地

最新推荐文章于 2024-07-09 16:24:56 发布

阅读量2.2k

点赞数 1

文章标签：前端 vue.js typescript

本文链接：https://blog.csdn.net/weixin_44996782/article/details/127751280

版权

本文介绍如何使用 Vue3 和 TypeScript 在前端构建一个包含滑块验证功能的登录页面。通过结合 Vue3 的特性与 TypeScript 的静态类型检查，确保组件的稳定性和可维护性。内容涵盖组件设计、滑块验证逻辑实现以及与后台接口的交互过程。

摘要由CSDN通过智能技术生成

<template>
    <div class="login" @keyup.enter="clickLogin">
        <div class="loginModule" ref="formWrap">
            <div class="logo">
                <img src="@/assets/images/logo.png" alt="" />
            </div>
            <div class="form">
                <el-form ref="loginFormRef" :rules="loginRules" :model="loginForm">
                    <el-form-item prop="username">
                        <el-input
                            clearable
                            placeholder="用户名"
                            v-model="loginForm.username"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            clearable
                            show-password
                            placeholder="密码"
                            v-model="loginForm.password"
                        >
                        </el-input>
                    </el-form-item>
                    <div class="sliderValidate">
                        <div
                            class="validateWrap"
                            ref="sliderWrap"
                            :class="{
                                validatePass: validPass
                            }"
                        >
                            <div class="block" ref="slider">
                                <img
                                    v-show="validPass"
                                    src