-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (116 loc) · 4.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>显示键名</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="scss/main.css?v=20240219180558">
</head>
<body>
<div id="app" v-cloak>
<div class="btn-wrapper">
<div class="clear-button" @click="keyList = []">清空</div>
</div>
<div v-if="keyList.length > 0" class="key-list">
<div :class="['key-item', {active: item.isActive}]" v-for="item in keyList" :key="item.id"
@click="item.isActive = !item.isActive"
>
<div class="special-key-list">
<div :class="['special-key', {active: item.shiftKey}]">SHIFT</div>
<div :class="['special-key', {active: item.ctrlKey}]">CTRL</div>
<div :class="['special-key', {active: item.altKey}]">ALT</div>
<div :class="['special-key', {active: item.metaKey}]">META</div>
</div>
<div class="key-face">
<div class="key-name">{{item.key}}</div>
<div class="key-code">{{item.code}}</div>
</div>
</div>
</div>
<div v-else class="tip">按键显示键名</div>
<div class="share-link">github: <a target="_blank" href="https://github.com/KyleBing/show-keyname">https://github.com/KyleBing/show-keyname</a></div>
</div>
</body>
<script type="module">
import { createApp, onMounted, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const keyList = ref([])
const lastId = ref(0)
onMounted(()=> {
window.addEventListener('wheel', event => {
// console.log(event)
let keyName = ''
if (event.deltaY > 0){
keyName = '滚动 ↓'
} else if (event.deltaY === 0) {
} else {
keyName = '滚动 ↑'
}
if (event.deltaX > 0){
keyName = '滚动 →'
} else if (event.deltaX === 0) {
} else {
keyName = '滚动 ←'
}
keyList.value.push({
id: lastId.value,
isActive: false,
key: keyName,
code: `${event.deltaX} , ${event.deltaY}`,
metaKey: event.metaKey,
altKey: event.altKey,
shiftKey: event.shiftKey,
ctrlKey: event.ctrlKey
})
lastId.value = lastId.value + 1
})
window.addEventListener('mousedown', event => {
// console.log(event)
let keyName = ''
switch (event.buttons){
case 0: keyName = '鼠标空'; break
case 1: keyName = '鼠标左击'; break
case 2: keyName = '鼠标右击'; break
case 4: keyName = '鼠标中击'; break
case 8: keyName = '后退'; break
case 16: keyName = '前进'; break
}
keyList.value.push({
id: lastId.value,
isActive: false,
key: keyName,
code: event.buttons,
metaKey: event.metaKey,
altKey: event.altKey,
shiftKey: event.shiftKey,
ctrlKey: event.ctrlKey
})
lastId.value = lastId.value + 1
})
window.addEventListener('keydown', event => {
keyList.value.push({
id: lastId.value,
isActive: false,
key: event.key,
code: event.code,
metaKey: event.metaKey,
altKey: event.altKey,
shiftKey: event.shiftKey,
ctrlKey: event.ctrlKey
})
lastId.value = lastId.value + 1
if (/^Key[IR]$/ig.test(event.code)){
} else {
event.preventDefault()
}
})
})
return {
keyList,
}
},
}).mount('#app')
</script>
</html>