<template>
<div class="absolute top-1/3 left-1/3 select-none">
<div class="flex justify-center w-full">
<kbd class="kbd w-16 h-12" @mousedown="goUpDown" @mouseup="goUpUp">▲</kbd>
</div>
<div class="flex justify-center gap-12 w-full">
<kbd class="kbd h-16 w-12" @mousedown="goLeftDown" @mouseup="goLeftUp">◀︎</kbd>
<kbd class="kbd h-16 w-12" @mousedown="goRightDown" @mouseup="goRightUp">▶︎</kbd>
</div>
<div class="flex justify-center w-full">
<kbd class="kbd w-16 h-12" @mousedown="goDownDown" @mouseup="goDownUp">▼</kbd>
</div>
</div>
</template>
<script setup lang="ts">
let timer:NodeJS.Timer|null = null
function startTimer(callback:()=>void){
timer = setInterval(callback,1000)
}
function setBgColor( e:MouseEvent,color:string){
(e.target as HTMLElement).style.backgroundColor=color;
}
function move(dir:string){
console.log(dir);
switch(dir){
case 'up':
break;
case 'down':
break;
case 'left':
break;
case 'up':
break;
default:
break
}
}
// judge the agv is moving
function isNaving():boolean{
// send http request to backend
// judge the current navigation is completed
return true
}
// run the agv
function runAgv(dir:string){
}
const goUpDown= (e:MouseEvent)=>{
setBgColor(e,'#44cef6')
startTimer(()=>{
move('up')
})
}
const goUpUp= (e:MouseEvent)=>{
clearInterval(timer!);
setBgColor(e,'#ffffff')
}
//----------------------------------------------------------------------------
const goLeftDown= (e:MouseEvent)=>{
setBgColor(e,'#44cef6')
startTimer(()=>{
move('left')
})
}
const goLeftUp= (e:MouseEvent)=>{
clearInterval(timer!);
setBgColor(e,'#ffffff')
}
//---------------------------------------------------------------------------
const goRightDown= (e:MouseEvent)=>{
setBgColor(e,'#44cef6')
startTimer(()=>{
move('right')
})
}
const goRightUp= (e:MouseEvent)=>{
clearInterval(timer!);
setBgColor(e,'#ffffff')
}
//--------------------------------------------------------------------------
const goDownDown= (e:MouseEvent)=>{
setBgColor(e,'#44cef6')
startTimer(()=>{
move('down')
})
}
const goDownUp= (e:MouseEvent)=>{
clearInterval(timer!);
setBgColor(e,'#ffffff')
}
</script>
<style scoped lang="less"></style>
标签:const,startTimer,MouseEvent,move,timer,遥控器,agv,setBgColor
From: https://www.cnblogs.com/zhuoss/p/17010485.html