- 首页 > it技术 > >
vue使用快捷键(F1-F12),聚焦el-input框并选中文本
【vue使用快捷键(F1-F12),聚焦el-input框并选中文本】业务需求:通过键盘快捷键,如:F2,选中input框,可直接输入值。
data(){
return{
focusState: false
}
},
mounted(){
addEventListener('keydown', this.keyDown)//创建监听键盘事件
},
directives: {
focus: {
//根据focusState的状态改变是否聚焦focus
update: function (el, { value }) {//第二个参数传进来的是个json
if (value) {
//使用的el-input
el.getElementsByTagName("input")[0].focus()
}
}
}
},
method:{
//得到焦点选中
focusSelect (event) {
event.currentTarget.select();
},
keyDown(e) {
console.log(e);
if (e.key == 'F2') {
this.focusState= true
e.preventDefault();
//阻止浏览器默认事件
return false
}
},
}
推荐阅读