zoukankan      html  css  js  c++  java
  • 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         },
    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
    
    
    
    
    
  • 相关阅读:
    canvas---HTML5新特性
    flex布局之兼容
    前端Blob对二进制流数据的处理方式
    execCommand的复制
    express快速入门
    react+redux+webpack+git技术栈
    react开发
    gulp工程化工具
    python---django安装
    vue+webpack+element-ui+git
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/11357389.html
Copyright © 2011-2022 走看看