vue3实现滑块验证具体实现代码

首先上个效果图开开眼：

详细实现代码

<template>

    <div class="box">

        <h3>拖动滑块完成验证</h3>

        <div class="img-box" ref="bgImgRef">

            <img class="bg" src="https://img1.baidu.com/it/u=82139613,1601399491&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">

            <div class="hc" :style="{ left: data1.left + 'px', top: data1.top + 'px' }"></div>

            <div class="hd" :style="{ left: data.left + 'px', top: data.top + 'px',backgroundPositionX: '0'-data1.left + 'px',backgroundPositionY:'0'-data1.top + 'px' }">

            </div>

        </div>

        <div class="btn-box">

            <div ref="btnRef" class="btn" :style="{ left: data.left + 'px' }" @mousedown="btnMousedown"

                @mouseup="btnMouseup">|||</div>

        </div>

    </div>

</template>

<script setup>

import { reactive, onMounted, toRefs } from "vue";

// 全局

let $props = defineProps({

    top: {

        type: Number,

        default: 140

    }

})

let $emit = defineEmits(['getPosition'])

const data = reactive({

    left: 0,

    top: $props.top,

    // 计算出的位置

    btnLeft: 0,

    btnRef: null,

    offsetLeft: 0,

    positon:0,

    bgImgRef: null

});

const data1 = reactive({

    left: 70,

    top: $props.top,

    // 计算出的位置

    btnLeft: 0,

    btnRef: null,

    offsetLeft: 0,

    bgImgRef: null

});

// 解构ref

const { btnRef, bgImgRef } = toRefs(data);

// let btnRef=ref(null)

onMounted(() => {

    // data1随机位置

    data1.left=(Math.random()*(270-70)+70).toFixed(0);

    data1.top=((Math.random()*(210-50-50))+50).toFixed(0);

    data.top=data1.top;

    console.log(111,data1.left,data1.top);

    data.offsetLeft = data.bgImgRef.offsetLeft

    // 监听鼠标松开

    document.body.addEventListener("mouseup", btnMouseup)

})

// 按下

var btnMousedown = (e) => {

    // 计算出鼠标按下的位置 pageX 减去按钮距离窗口的位置等于鼠标点击的位置距离按钮的边距

    data.btnLeft = e.pageX - data.btnRef.offsetLeft

    document.body.addEventListener("mousemove", btnMousemove)

}

//滑动的时候只要求鼠标没有松开

var btnMousemove = (e) => {

    // left等于鼠标的位置pageX减去data.btnRef.offsetLeft再减去data.btnLeft（计算出的距离）

    let x = e.pageX - data.offsetLeft - data.btnLeft

    // 判断滑动图片时是否超出范围

    if (x <= 0) x = 0

    else if (x >= 285) x = 285

    data.left = x

}

// 鼠标松开

var btnMouseup = (e) => {

    console.log(2);

    $emit('getPosition', data.left)

    if(data1.left>=data.left-3||data1.left<=data.left+3){

        console.log("验证通过");

    }

    document.body.removeEventListener("mousemove", btnMousemove)

}

</script>

<style scoped lang="scss">

.box {

    width: 340px;

    height: 320px;

    border: 1px solid #ccc;

    margin: 0 auto;

    padding: 10px;

}

.img-box {

    position: relative;

}

.bg {

    width: 100%;

}

.hd{

    overflow: hidden;

    background: url('https://img1.baidu.com/it/u=82139613,1601399491&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500');

    background-size:340px 210px ;

    background-position: -70px -110px;

    position: absolute;

    height: 50px;

    width: 55px;

    left: 10px;

    cursor: pointer;

}

.hc{

    background: rgb(180, 0, 0);

    position: absolute;

    height: 50px;

    width: 55px;

    left: 81px;

    cursor: pointer;

}

.btn-box {

    width: 100%;

    height: 10px;

    border-radius: 5px;

    background: #e4e4e4;

    margin-top: 15px;

}

.btn {

    position: relative;

    top: -10px;

    left: 26px;

    width: 55px;

    height: 30px;

    text-align: center;

    letter-spacing: 5px;

    line-height: 30px;

    color: #fff;

    border-radius: 15px;

    background-color: rgb(26, 121, 255);

    box-shadow: rgb(26 121 255 / 52%) 0px 0px 10px 1px;

    cursor: pointer;

}

</style>