需求：快捷键实现el-input弹框中自动填入数据
思路：鼠标光标没有聚焦到input输入框中使用keymaster插件，光标聚焦到input输入框中keymaster无效，需要使用@keyup.native来监听按键
使用keymaster插件和@keyup.native来监听键盘事件
npm install keymaster --save
-
keymaster插件使用起来很方便，keymaster监听按键后，改变输入框数据，并且调用focus方法使光标聚焦到输入框内，需要注意的是，这里的focus方法是原生input输入框的方法。
-
由于鼠标光标聚焦在输入框内，keymaster无效，因此使用@keyup.native在el-input上添加键盘事件
<template>
<div>
<el-input v-model="input"
ref="searchInput"
@keyup.native="changeInput"
placeholder="请输入"></el-input>
</div>
</template>
<script type="text/ecmascript-6">
import keymaster from 'keymaster'
export default {
data () {
return {
input: ''
}
},
mounted () {
keymaster('alt+f1', () => {
this.input = '测试数据'
this.$refs.searchInput.$el.children[0].focus()
})
},
methods: {
changeInput (event) {
if (event.keyCode == 112 && event.altKey) {
this.input = '测试数据'
this.$refs.searchInput.$el.children[0].focus()
}
}
}
}
</script>
- 注：keycode指的是js键盘按钮keyCode，下面为简记表 数字值 | 实际键值 | | ------- | --------------- | | 48到57 | 0到9 | | 65到90 | a到z（A到Z） | | 112到135 | F1到F24 | | 8 | BackSpace（退格） | | 9 | Tab | | 13 | Enter（回车） | | 20 | Caps_Lock（大写锁定） | | 32 | Space（空格键） | | 37 | Left（左箭头） | | 38 | Up（上箭头） | | 39 | Right（右箭头） | | 40 | Down（下箭头）
