vue 自定义全局按键修饰符

概述在监听键盘事件时，我们经常需要检查常见的键值。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 },

在监听键盘事件时，我们经常需要检查常见的键值。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_2100 keycode 99 = KP_3101 keycode 100 = KP_4102 keycode 101 = KP_5103 keycode 102 = KP_6104 keycode 103 = KP_7105 keycode 104 = KP_8106 keycode 105 = KP_9107 keycode 106 = KP_* KP_Multiply108 keycode 107 = KP_+ KP_Add109 keycode 108 = KP_Enter KP_Separator110 keycode 109 = KP_- KP_Subtract111 keycode 110 = KP_. KP_Decimal112 keycode 111 = KP_/ KP_divIDe113 keycode 112 = F1114 keycode 113 = F2115 keycode 114 = F3116 keycode 115 = F4117 keycode 116 = F5118 keycode 117 = F6119 keycode 118 = F7120 keycode 119 = F8121 keycode 120 = F9122 keycode 121 = F10123 keycode 122 = F11124 keycode 123 = F12125 keycode 124 = F13126 keycode 125 = F14127 keycode 126 = F15128 keycode 127 = F16129 keycode 128 = F17130 keycode 129 = F18131 keycode 130 = F19132 keycode 131 = F20133 keycode 132 = F21134 keycode 133 = F22135 keycode 134 = F23136 keycode 135 = F24137 keycode 136 = Num_Lock138 keycode 137 = Scroll_Lock139 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 macron212 keycode 211 =213 keycode 212 = copyright registered214 keycode 213 = guillemotleft guillemotright215 keycode 214 = masculine ordfeminine216 keycode 215 = ae AE217 keycode 216 = cent yen218 keycode 217 = questiondown exclamdown219 keycode 218 = onequarter onehalf threequarters220 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 division230 keycode 228 = acircumflex Acircumflex231 keycode 229 = ecircumflex Ecircumflex232 keycode 230 = icircumflex Icircumflex233 keycode 231 = ocircumflex Ocircumflex234 keycode 232 = ucircumflex Ucircumflex235 keycode 233 = ntilde Ntilde236 keycode 234 = yacute Yacute237 keycode 235 = oslash Ooblique238 keycode 236 = aring Aring239 keycode 237 = ccedilla Ccedilla240 keycode 238 = thorn THORN241 keycode 239 = eth ETH242 keycode 240 = diaeresis cedilla currency243 keycode 241 = agrave Agrave atilde Atilde244 keycode 242 = egrave Egrave245 keycode 243 = igrave Igrave246 keycode 244 = ograve Ograve otilde Otilde247 keycode 245 = ugrave Ugrave248 keycode 246 = adiaeresis Adiaeresis249 keycode 247 = ediaeresis Ediaeresis250 keycode 248 = IDiaeresis IDiaeresis251 keycode 249 = odiaeresis Odiaeresis252 keycode 250 = udiaeresis Udiaeresis253 keycode 251 = ssharp question backslash254 keycode 252 = asciicircum degree255 keycode 253 = 3 sterling256 keycode 254 = Mode_switch

总结

以上是内存溢出为你收集整理的vue 自定义全局按键修饰符全部内容，希望文章能够帮你解决vue 自定义全局按键修饰符所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。