Vue3 移动端 的小球碰撞、标数

脚手架 中 注：不是原创

<template>
    <div class='wrap'>
        <div class="line" ref="line"></div>
        <div class="boll lc" ref="lc" @touchstart="Fn(getlc(),$event)">
            <div class="scale">{{num1}}</div>
        </div>
        <div class="boll rc" ref="rc" @touchstart="Fn(getrc(),$event)">
            <div class="scale">{{num2}}</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "@vue/reactivity"


const lc = ref<HTMLDivElement>()
const getlc = () => lc.value as HTMLDivElement
const rc = ref<HTMLDivElement>()
const getrc = () => rc.value as HTMLDivElement
const line = ref<HTMLDivElement>()
const getline = () => line.value as HTMLDivElement
let x = 0; let disx = 0;
let num1 = ref<number>(0)
let num2 = ref<number>(100)
const Fn = (item: HTMLDivElement, e: TouchEvent) => {
    disx = e.changedTouches[0].pageX - item.offsetLeft
    item.ontouchmove = function (e) {
        x = e.changedTouches[0].pageX - disx
        if (x < 0) x = 0; if (x > 225) x = 225;
        item.style.left = x + 'px'
        if (getrc().offsetLeft >= getlc().offsetLeft) {
            getline().style.width = getrc().offsetLeft - getlc().offsetLeft + 25 + 'px'
            getline().style.left = getlc().offsetLeft + 'px'
        } else {
            getline().style.width = getlc().offsetLeft - getrc().offsetLeft + 25 + 'px'
            getline().style.left = getrc().offsetLeft + 'px'
        }
        if (item.classList[1] === 'lc') num1.value = Math.floor(getlc().offsetLeft / 2.25)
        if (item.classList[1] === 'rc') num2.value = Math.floor(getrc().offsetLeft / 2.25)
    }
}
</script>
<style lang="less" scoped>
html,
#app {
    width: 100vw;
    height: 100vh;
}


body {
    width: 100vw;
    height: 100vh;
}




.wrap {
    width: 500px;
    height: 20px;
    background-color: rgb(0, 255, 34);
    position: relative;
    margin: 500px auto;
}




.line {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    background-color: rgb(9, 0, 128);
}




.boll {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(255, 0, 162);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);


    .scale {
        position: absolute;
        top: -40px;
        left: 20px;
    }
}


.rc {
    left: 450px;
}


.ac {
    z-index: 99;
}
</style>