<template>
|
<div class="pointControl">
|
<div class="direction">
|
<div class="blackBg directionUp">
|
<div v-for="item in upperRowButton" :key="item.text">
|
<el-icon :class="item.icon"></el-icon>
|
<div
|
:class="{ hotkeyBtn: true, activeKey: currentKey === item.text }"
|
@click="() => mousedown(item.text)"
|
v-hold="() => mousedown(item.text)"
|
>
|
{{ item.text }}
|
</div>
|
</div>
|
</div>
|
<div class="blackBg directionDown">
|
<div v-for="item in lowerRowButton" :key="item.text">
|
<el-icon :class="item.icon"></el-icon>
|
<div
|
:class="{ hotkeyBtn: true, activeKey: currentKey === item.text }"
|
@click="() => mousedown(item.text)"
|
v-hold="() => mousedown(item.text)"
|
>
|
{{ item.text }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<ControlComPass />
|
|
<div class="height-direction">
|
<div class="blackBg height-direction-btn">
|
<el-icon class="el-icon-top" />
|
<div :class="{ hotkeyBtn: true, activeKey: currentKey === 'C' }" v-hold="() => mousedown('C')">C</div>
|
</div>
|
<div class="blackBg height-direction-btn">
|
<div :class="{ hotkeyBtn: true, activeKey: currentKey === 'Z' }" v-hold="() => mousedown('Z')">Z</div>
|
<el-icon class="el-icon-bottom" />
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import vHold from '@/directive/hold'
|
import ControlComPass from './ControlComPass/ControlComPass.vue'
|
|
const lowerRowButton = [
|
{ icon: 'el-icon-arrow-left', text: 'A' },
|
{ icon: 'el-icon-arrow-down', text: 'S' },
|
{ icon: 'el-icon-arrow-right', text: 'D' },
|
]
|
const upperRowButton = [
|
{ icon: 'el-icon-refresh-left', text: 'Q' },
|
{ icon: 'el-icon-arrow-up', text: 'W' },
|
{ icon: 'el-icon-refresh-right', text: 'E' },
|
]
|
let currentKey = ref('')
|
let keyReset = null
|
let visible = false
|
|
function mousedown(key) {
|
if (key === 'Q') {
|
console.log(6666666666)
|
}
|
}
|
|
function handleKeydown(e) {
|
currentKey.value = e.key.toUpperCase()
|
mousedown(e.key.toUpperCase())
|
}
|
|
function handleKeyup() {
|
currentKey.value = null
|
}
|
|
onMounted(() => {
|
window.addEventListener('keydown', handleKeydown)
|
window.addEventListener('keyup', handleKeyup)
|
})
|
onBeforeUnmount(() => {
|
window.removeEventListener('keydown', handleKeydown)
|
window.removeEventListener('keyup', handleKeyup)
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.f-c {
|
display: flex;
|
align-items: center;
|
}
|
|
//变量
|
$FSColor: #00ee8b;
|
|
.hotkeyBtn {
|
background: #3c3c3c;
|
border-radius: 2px;
|
width: 24px;
|
height: 24px;
|
font-size: 14px;
|
line-height: 24px;
|
text-align: center;
|
color: #fff;
|
cursor: pointer;
|
-webkit-user-select: none;
|
user-select: none;
|
|
&:hover {
|
background: $FSColor;
|
}
|
}
|
|
.pointControl {
|
display: flex;
|
justify-content: center;
|
align-items: flex-end;
|
color: white;
|
gap: 0 10px;
|
pointer-events: all;
|
width: 100%;
|
height: 200px;
|
|
.activeKey {
|
background: $FSColor;
|
}
|
|
.blackBg {
|
background: rgba(0, 0, 0, 0.65);
|
padding: 5px 5px;
|
border-radius: 5px;
|
}
|
|
.direction {
|
display: flex;
|
flex-direction: column;
|
width: 100px;
|
|
.speedBox {
|
color: $FSColor;
|
font-size: 16px;
|
font-weight: 600;
|
margin: 5px 0;
|
gap: 0 5px;
|
}
|
|
.editBox {
|
display: flex;
|
justify-content: end;
|
gap: 0 5px;
|
margin-bottom: 5px;
|
|
.current-point {
|
font-size: 20px;
|
display: flex;
|
align-items: center;
|
color: $FSColor;
|
}
|
|
.editPointBtn {
|
&:hover {
|
cursor: pointer;
|
background: $FSColor;
|
}
|
}
|
}
|
|
.directionUp,
|
.directionDown {
|
display: flex;
|
justify-content: space-around;
|
text-align: center;
|
height: 55px;
|
|
> div {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
}
|
}
|
|
.height-direction {
|
width: 100px;
|
display: flex;
|
flex-direction: column;
|
align-items: end;
|
gap: 5px 0;
|
|
.height-direction-btn {
|
width: 35px;
|
height: 55px;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
}
|
}
|
</style>
|
