Vue3 简单的滑块验证

<template>
    <div class="sliderverify">
        <div class="bg" :style="`width:${ disX+40 }px;`"></div>
        <div ref="btn" :class="statusItem[status]"></div>
    </div>
</template>
<script setup>
    import {
        ref,
        getCurrentInstance,
        nextTick
    } from 'vue'
    const emit = defineEmits(['change'])
    const props = defineProps(['width'])
    const status = ref(0)
    const disX = ref(0)
    const btn = ref()
    const statusItem = ['button', 'success']

    nextTick(() => {

        const el = btn.value

        el.onmousedown = el.ontouchstart = e => {
            const clientX = e.clientX || e.changedTouches[0].clientX
            const pw = el.parentElement.offsetWidth - el.offsetWidth
            window.onmousemove = window.ontouchmove = m => {
                var x = (m.clientX || m.changedTouches[0].clientX) - clientX
                disX.value = x < 0 ? 0 : pw <= x ? pw - 2 : x
                e.target.style.transform = `translateX(${disX.value}px)`
                e.preventDefault()
            }
            window.onmouseup = window.ontouchend = () => {
                window.onmouseup = window.onmousemove = window.ontouchmove = null
                if (Math.abs(disX.value - pw) < 3) {
                    el.onmousedown = el.ontouchstart = null
                    status.value = 1
                } else {
                    status.value = disX.value = 0
                }
                emit('change', status.value)
                e.target.style.transform = 'translateX(0px)'
            }
        }

    })
</script>
<style scoped>
    .sliderverify {
        display: flex;
        height: 30px;
        background-color: #eee;
        border: 1px solid #ddd;
        border-radius: 5px;
        position: relative;
    }

    .sliderverify .button,
    .sliderverify .success,
    .sliderverify .fail {
        position: absolute;
        display: block;
        height: 100%;
        background-color: #fff;
        width: 40px;
        border-radius: 5px;
    }

    .sliderverify .bg {
        position: absolute;
        background-color: #a0cfff;
        border-radius: 5px;
        height: 100%
    }

    .sliderverify .button::before,
    .sliderverify .button::after,
    .sliderverify .success::after {
        position: absolute;
        display: block;
        content: "";
        width: 10px;
        height: 10px;
        border-left: 2px solid #bbb;
        border-bottom: 2px solid #bbb;
        transform: rotate(225deg);
        margin-left: 15px;
        margin-top: 8px;
    }

    .sliderverify .success::after {
        border-left: 2px solid #eee;
        border-bottom: 2px solid #eee;
    }

    .sliderverify .button::after {
        margin-left: 8px;
        margin-top: 8px;
    }

    .sliderverify .success::after {
        width: 14px;
        height: 8px;
        transform: rotate(307deg);
        margin: 7px 0 0 11px;
    }

    .sliderverify .success {
        background-color: #67c23a;
        right: 0;
    }
</style>