vue 自定义全局按键修饰符

Posted 2021-02-03 chenzongyan

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

 

JS部分：

 1     Vue.config.keyCodes = {
 2         f2:113,
 3     }
 4     var app = new Vue({
 5         el: "#app",
 6         data() {
 7             return {
 8                 msg: "我是谁，我从哪里来，我又要往哪里去"
 9             }
10         },
11         methods:{
12             submit(){
13                 console.log("你按了回车键");
14             },
15             f2submit(){
16                 console.log("你按了f2键");
17             }
18         }
19     });

 

html部分：

1     <div id="app">
2         <p><input type="text" placeholder="回车可提交" @keyup.enter="submit"></p>
3         <p><input type="text" placeholder="f2可提交" @keyup.f2="f2submit"></p>
4     </div>

 

结果：

 

Vue内置的按键名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

 

keyCode列表：

  1 keycode 0 =
  2 keycode 1 =
  3 keycode 2 =
  4 keycode 3 =
  5 keycode 4 =
  6 keycode 5 =
  7 keycode 6 =
  8 keycode 7 =
  9 keycode 8 = BackSpace
 10 keycode 9 = Tab
 11 keycode 10 =
 12 keycode 11 =
 13 keycode 12 = Clear
 14 keycode 13 = Enter
 15 keycode 14 =
 16 keycode 15 =
 17 keycode 16 = Shift_L
 18 keycode 17 = Control_L
 19 keycode 18 = Alt_L
 20 keycode 19 = Pause
 21 keycode 20 = Caps_Lock
 22 keycode 21 =
 23 keycode 22 =
 24 keycode 23 =
 25 keycode 24 =
 26 keycode 25 =
 27 keycode 26 =
 28 keycode 27 = Esc Escape
 29 keycode 28 =
 30 keycode 29 =
 31 keycode 30 =
 32 keycode 31 =
 33 keycode 32 = Space
 34 keycode 33 = Page Up
 35 keycode 34 = Page Down
 36 keycode 35 = End
 37 keycode 36 = Home
 38 keycode 37 = Left Arrow
 39 keycode 38 = Up Arrow
 40 keycode 39 = Right Arrow
 41 keycode 40 = Down Arrow
 42 keycode 41 = Select
 43 keycode 42 = Print
 44 keycode 43 = Execute
 45 keycode 44 =
 46 keycode 45 = Insert
 47 keycode 46 = Delete
 48 keycode 47 = Help
 49 keycode 48 = 0 )
 50 keycode 49 = 1 !
 51 keycode 50 = 2 @
 52 keycode 51 = 3 #
 53 keycode 52 = 4 $
 54 keycode 53 = 5 %
 55 keycode 54 = 6 ^
 56 keycode 55 = 7 &
 57 keycode 56 = 8 *
 58 keycode 57 = 9 (
 59 keycode 58 =
 60 keycode 59 =
 61 keycode 60 =
 62 keycode 61 =
 63 keycode 62 =
 64 keycode 63 =
 65 keycode 64 =
 66 keycode 65 = a A
 67 keycode 66 = b B
 68 keycode 67 = c C
 69 keycode 68 = d D
 70 keycode 69 = e E
 71 keycode 70 = f F
 72 keycode 71 = g G
 73 keycode 72 = h H
 74 keycode 73 = i I
 75 keycode 74 = j J
 76 keycode 75 = k K
 77 keycode 76 = l L
 78 keycode 77 = m M
 79 keycode 78 = n N
 80 keycode 79 = o O
 81 keycode 80 = p P
 82 keycode 81 = q Q
 83 keycode 82 = r R
 84 keycode 83 = s S
 85 keycode 84 = t T
 86 keycode 85 = u U
 87 keycode 86 = v V
 88 keycode 87 = w W
 89 keycode 88 = x X
 90 keycode 89 = y Y
 91 keycode 90 = z Z
 92 keycode 91 =
 93 keycode 92 =
 94 keycode 93 =
 95 keycode 94 =
 96 keycode 95 =
 97 keycode 96 = KP_0
 98 keycode 97 = KP_1
 99 keycode 98 = KP_2
100 keycode 99 = KP_3
101 keycode 100 = KP_4
102 keycode 101 = KP_5
103 keycode 102 = KP_6
104 keycode 103 = KP_7
105 keycode 104 = KP_8
106 keycode 105 = KP_9
107 keycode 106 = KP_* KP_Multiply
108 keycode 107 = KP_+ KP_Add
109 keycode 108 = KP_Enter KP_Separator
110 keycode 109 = KP_- KP_Subtract
111 keycode 110 = KP_. KP_Decimal
112 keycode 111 = KP_/ KP_Divide
113 keycode 112 = F1
114 keycode 113 = F2
115 keycode 114 = F3
116 keycode 115 = F4
117 keycode 116 = F5
118 keycode 117 = F6
119 keycode 118 = F7
120 keycode 119 = F8
121 keycode 120 = F9
122 keycode 121 = F10
123 keycode 122 = F11
124 keycode 123 = F12
125 keycode 124 = F13
126 keycode 125 = F14
127 keycode 126 = F15
128 keycode 127 = F16
129 keycode 128 = F17
130 keycode 129 = F18
131 keycode 130 = F19
132 keycode 131 = F20
133 keycode 132 = F21
134 keycode 133 = F22
135 keycode 134 = F23
136 keycode 135 = F24
137 keycode 136 = Num_Lock
138 keycode 137 = Scroll_Lock
139 keycode 138 =
140 keycode 139 =
141 keycode 140 =
142 keycode 141 =
143 keycode 142 =
144 keycode 143 =
145 keycode 144 =
146 keycode 145 =
147 keycode 146 =
148 keycode 147 =
149 keycode 148 =
150 keycode 149 =
151 keycode 150 =
152 keycode 151 =
153 keycode 152 =
154 keycode 153 =
155 keycode 154 =
156 keycode 155 =
157 keycode 156 =
158 keycode 157 =
159 keycode 158 =
160 keycode 159 =
161 keycode 160 =
162 keycode 161 =
163 keycode 162 =
164 keycode 163 =
165 keycode 164 =
166 keycode 165 =
167 keycode 166 =
168 keycode 167 =
169 keycode 168 =
170 keycode 169 =
171 keycode 170 =
172 keycode 171 =
173 keycode 172 =
174 keycode 173 =
175 keycode 174 =
176 keycode 175 =
177 keycode 176 =
178 keycode 177 =
179 keycode 178 =
180 keycode 179 =
181 keycode 180 =
182 keycode 181 =
183 keycode 182 =
184 keycode 183 =
185 keycode 184 =
186 keycode 185 =
187 keycode 186 =
188 keycode 187 = =+
189 keycode 188 = ,<
190 keycode 189 = -_
191 keycode 190 = .>
192 keycode 191 = /?
193 keycode 192 = `~
194 keycode 193 =
195 keycode 194 =
196 keycode 195 =
197 keycode 196 =
198 keycode 197 =
199 keycode 198 =
200 keycode 199 =
201 keycode 200 =
202 keycode 201 =
203 keycode 202 =
204 keycode 203 =
205 keycode 204 =
206 keycode 205 =
207 keycode 206 =
208 keycode 207 =
209 keycode 208 =
210 keycode 209 =
211 keycode 210 = plusminus hyphen macron
212 keycode 211 =
213 keycode 212 = copyright registered
214 keycode 213 = guillemotleft guillemotright
215 keycode 214 = masculine ordfeminine
216 keycode 215 = ae AE
217 keycode 216 = cent yen
218 keycode 217 = questiondown exclamdown
219 keycode 218 = onequarter onehalf threequarters
220 keycode 219 = [{
221 keycode 220 = |
222 keycode 221 = ]}
223 keycode 222 = ‘"
224 
225 keycode 223 =
226 keycode 224 =
227 keycode 225 =
228 keycode 226 =
229 keycode 227 = multiply division
230 keycode 228 = acircumflex Acircumflex
231 keycode 229 = ecircumflex Ecircumflex
232 keycode 230 = icircumflex Icircumflex
233 keycode 231 = ocircumflex Ocircumflex
234 keycode 232 = ucircumflex Ucircumflex
235 keycode 233 = ntilde Ntilde
236 keycode 234 = yacute Yacute
237 keycode 235 = oslash Ooblique
238 keycode 236 = aring Aring
239 keycode 237 = ccedilla Ccedilla
240 keycode 238 = thorn THORN
241 keycode 239 = eth ETH
242 keycode 240 = diaeresis cedilla currency
243 keycode 241 = agrave Agrave atilde Atilde
244 keycode 242 = egrave Egrave
245 keycode 243 = igrave Igrave
246 keycode 244 = ograve Ograve otilde Otilde
247 keycode 245 = ugrave Ugrave
248 keycode 246 = adiaeresis Adiaeresis
249 keycode 247 = ediaeresis Ediaeresis
250 keycode 248 = idiaeresis Idiaeresis
251 keycode 249 = odiaeresis Odiaeresis
252 keycode 250 = udiaeresis Udiaeresis
253 keycode 251 = ssharp question backslash
254 keycode 252 = asciicircum degree
255 keycode 253 = 3 sterling
256 keycode 254 = Mode_switch

keyCode