使用vue3封装一个图片滑动验证组件封装

子组件代码:

<template>
    <div class="box">
        <h3>拖動下方滑塊完成評圖</h3>
        <div class="img-box" ref="bgImgRef">
            <img class="bg" src="../assets/wx2.png" alt="">
            <img class="hd" :style="{ left: data.left + 'px', top: data.top + 'px' }" src="../assets/wx1.png" alt="">
        </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: 28,
    top: $props.top,
    // 计算出的位置
    btnLeft: 0,
    btnRef: null,
    offsetLeft: 0,
    bgImgRef: null
});
// 解构ref
const { btnRef, bgImgRef } = toRefs(data);
// let btnRef=ref(null)

onMounted(() => {
    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) => {
    $emit('getPosition', data.left)
    document.body.removeEventListener("mousemove", btnMousemove)
}
</script>

<style scoped>
html,
body {
    width: 100%;
    height: 100%;
    user-select: none;
}

.box {
    width: 340px;
    height: 320px;
    border: 1px solid #ccc;
    margin: 0 auto;
    padding: 10px;
}

.img-box {
    position: relative;
}

.bg {
    width: 100%;
}

.hd {
    position: absolute;
    height: 50px;
    width: 55px;
    left: 26px;
    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>

父组件代码：

<script setup>
import ImageCheck from './components/ImageCheck.vue'

let top=140;
const getPosition=(x)=>{
  console.log(x,'http');
  
}
</script>

<template>
  <div><ImageCheck @getPosition="getPosition" :top="top"/></div>
</template>

<style scoped>

</style>