Shikong/scrcpy-mask
1
0
Fork 0
mirror of https://github.com/AkiChase/scrcpy-mask synced 2025-02-23 07:22:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(KeyBoard): add mouse event listener

Browse Source
This commit is contained in:
AkiChase 2024-04-16 22:50:21 +08:00
parent 3088ebe5de
commit b332c60eea
3 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Mask.vue
View File

@ -83,12 +83,12 @@ function toStartServer() {
<style scoped lang="scss">
.mask {
background-color: rgba(255, 255, 255, 0.2);
background-color: transparent;
overflow: hidden;
cursor: pointer;
}
.notice {
background-color: rgba(255, 255, 255, 0.2);
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;

27
src/components/keyboard/KeyBoard.vue
View File

@ -34,19 +34,41 @@ function keyupHandler(event: KeyboardEvent) {
} else keyboardCodeList.value.push(event.code);
}
function mousedownHandler(event: MouseEvent) {
event.preventDefault();
const key = `M${event.button}`;
if (keyboardCodeList.value.length > 10) {
keyboardCodeList.value.shift();
keyboardCodeList.value.push(key);
} else keyboardCodeList.value.push(key);
}
function mouseupHandler(event: MouseEvent) {
event.preventDefault();
const key = `M${event.button}`;
if (keyboardCodeList.value.length > 10) {
keyboardCodeList.value.shift();
keyboardCodeList.value.push(key);
} else keyboardCodeList.value.push(key);
}
onActivated(() => {
keyboardElement.value?.addEventListener("mousemove", mousemoveHandler);
keyboardElement.value?.addEventListener("mousedown", mousedownHandler);
keyboardElement.value?.addEventListener("mouseup", mouseupHandler);
document.addEventListener("keyup", keyupHandler);
});
onBeforeRouteLeave(() => {
keyboardElement.value?.removeEventListener("mousemove", mousemoveHandler);
keyboardElement.value?.removeEventListener("mousedown", mousedownHandler);
keyboardElement.value?.removeEventListener("mouseup", mouseupHandler);
document.removeEventListener("keyup", keyupHandler);
});
</script>
<template>
<div ref="keyboardElement" class="keyboard">
<div ref="keyboardElement" class="keyboard" @contextmenu.prevent>
此处最好用其他颜色的蒙版，和右侧的按键列表区同色
<div>{{ mouseX }}, {{ mouseY }}</div>
<div v-for="code in keyboardCodeList">
@ -57,7 +79,8 @@ onBeforeRouteLeave(() => {
<style scoped>
.keyboard {
background-color: rgba(255, 255, 255, 0.5);
color: var(--light-color);
background-color: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
</style>

15
src/styles.css
View File

@ -1,12 +1,12 @@
:root {
--primary-color: #63E2B7;
--primary-hover-color: #7FE7C4;
--primary-pressed-color: #5ACEA7;
--primary-color: #63e2b7;
--primary-hover-color: #7fe7c4;
--primary-pressed-color: #5acea7;
--bg-color: #101014;
--content-bg-color: #18181C;
--content-hl-color: #26262A;
--light-color: rgba(255, 255, 255, 0.9);
--content-bg-color: #18181c;
--content-hl-color: #26262a;
--light-color: rgba(255, 255, 255, 0.82);
--gray-color: #6b6e76;
--red-color: #fc5185;
--red-pressed-color: #f4336d;
@ -24,4 +24,3 @@ div#app {
height: 100%;
box-sizing: border-box;
}