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

<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36