vue+js+后端验证实现图片滑动验证(兼容性好)

不多逼逼,懂得都懂,直接上代码!!

以下是子组件的代码

<template>
    <div class="slider_box">
        <div class="verification">
            <span class="verification-span">请完成安全验证</span>
            <i class="el-icon-close" @click="offVerify"></i>
            <hr class="line" />
        </div>
        <div class="slide_img_content">
            <div class="slide_img">
                <img
                    class="slide_refresh"
                    src="../../../static/login/icon/refresh.png"
                    @click="uploadSlideVerificationCode();"
                />
                <img id="cutImage" class="slide_img_mark" ref="cutImage" />
                <img id="originalImage" ref="originalImage" />
            </div>
        </div>
        <div class="slider_clear">
            <div class="slider">
                <div
                    class="slider_arror"
                    ref="slider_arror"
                    style="cursor:pointer;"
                    onselectstart="return false;"
                >
                    <img
                        style="margin-top: 5px;"
                        id="arror_icon"
                        src="../../../static/login/icon/right_arror.png"
                        draggable="false"
                        width="30px"
                        height="30px"
                        ref="arror_icon"
                    />
                </div>
                <div class="slider_mask" ref="slider_mask"></div>
                <span class="slider_tip" onselectstart="return false;" ref="slider_tip">向右拖动滑块填充拼图</span>
            </div>
        </div>
        <p
            id="slideVerificationCodeError"
            style="font-weight:bold"
            ref="slideVerificationCodeError"
        ></p>
    </div>
</template>

<script>
import {
    slideVerificationCode,
    checkSlideVerificationSlideX,
} from "@/api/user.js"; //这两个接口也是看你的项目怎么来,我就是为了保存代码完整性留下来的
expor