vue+js登陆页面， 前端实现滑块验证

<template>
    <div class="Login" @keyup.enter="clickLogin">
        <div class="innerFormWrap"  ref="formWrap">
            <div class="logo">
               <img src="@/assets/images/logo.png" alt="" />
            div>
            <div class="content">
                <el-form :model="data" ref="form">
                    <el-form-item prop="username">
                        <el-input
                                @blur="usernameCheck"
                                v-model="data.username"
                                placeholder="用户名"
                                name="username"
                        >el-input>
                        <div class="infoMsg">
                            <p v-if="data.userMessage">{
  { data.userMessage }}p>
                        div>
                    el-form-item>
                    <el-form-item prop="password">
                        <el-input
                                @blur="passwordCheck"
                                v-model="data.password"
                                placeholder="密码"
                                show-password
                                name="password"
                        >el-input>
                        <div class="infoMsg">
                            <p v-if="data.passwordMessage">{
  { data.passwordMessage }}p>
                        div>
                    el-form-item>
                    <div v-if="showSliderCheck" 
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