vue整理代码快捷键,vue 快捷键
有的时候项目需要在页面使用快捷键，而且需要对快捷键进行维护。本文将为大家展示某视频剪辑软件实现快捷键录入功能的示例代码，感兴趣的可以了解一下
项目需要在页面使用快捷键，而且需要对快捷键进行维护，然后参考了此篇文章，改成自己的。
记录一下。
首先有一个组件，用来实现快捷键的录入操作。
直接上代码：
hotkeyInput.vue
文件
快捷键输入框—— 用于快捷键的录入
/doc
模板
div class=快捷键-键-输入:class= { cursor:focus } :style= $ props。style tabindex= 0 @ focus= handle focus
@ blur= focus=false @ keydown= handle keydown
模板v-if=list.length
模板列表中的v-for=(项目，索引
span:key= ` $ { item。text } _ $ { index } ` { { item。text } } I @ click= handleDeleteKey(index)/I/span
/模板
/模板
div v-else class= placeholder " { placeholder } }/div
/div
/模板
脚本
常量代码编号=数组。from({ length:10 }，(v，k)=` digit $ { k 1 } `)；
const CODE _ NUMPAD=array。from({ length:10 }，(v，k)=` NUMPAD $ { k 1 } `)；
const CODE_ABC=Array.from(
{长度：26 },
(v，k)=` key $ { string。来自charcode(k 65).toUpperCase()} `
);
const CODE _ FN=数组。from({ length:12 }，(v，k)=` f $ { k 1 } `)；
const CODE_CONTROL=[
轮班，
左移，
右移，
控制，
控制左，
控制权，
Alt ，
AltLeft ，
好吧，
];//shift键控制(Ctrl) Alt
导出默认值{
名称：热键输入，
道具：{
//默认绑定值
//传入[Ctrl d]格式时会自动处理成[{ text: Ctrl d ，controlKey: { altKey: false，ctrlKey: true，shiftKey: false，key: d ，code: KeyD } }]
热键：{
类型：数组，
必填：真，
},
//校验函数判断是否允许显示快捷键
验证：{
类型：功能，
默认值：()=真，
},
//无绑定时提示文字
占位符：{
类型：字符串，
默认值： ,
},
//限制最大数量
最大：{
类型：[字符串，数字],
默认值：1,
},
//快捷键使用范围
范围：{
类型：数组，
默认值：()=[NUMBER ， NUMPAD ， ABC ， FN]，
},
},
data() {
返回{
重点：假的，
list: this.hotkey，
keyRange: []，
};
},
观察：{
列表：函数（列表){
如果(列表。长度)这个。焦点=假；
这个. emit(更新：热键，这个。列表)；
},
热键：{
处理程序：函数(瓦尔){
如果(!长度值)返回；
const list=[]；
val.forEach((item)={
const arr=项目。拆分(“”)；
常量控制键={
altKey: arr.includes(Alt )，
ctrlKey: arr.includes(Control )，
shiftKey: arr.includes(Shift )，
key: arr[arr.length - 1]，
代码：` Key${arr[arr.length - 1].toUpperCase()} `，
};
list.push({
text: arr.reduce((text，item，i)={
如果(I)text=" "；
if(控制键。key===item)text=item。toupper case()；
else文本=项目
返回文本；
}, ),
控制键，
});
});
这个列表=列表
},
即时：真的，
},
范围：{
处理程序：函数(瓦尔){
const keyRangeList={
编号：CODE_NUMBER
NUMPAD: CODE_NUMPAD，
ABC: CODE_ABC，
FN: CODE_FN，
};
val.forEach((item)={
这个。关键范围=这个。关键范围。串联(
键范围列表[项目。toupper case()]
);
});
},
即时：真的，
},
},
方法：{
handleFocus() {
如果(!这个。列表。长度)这个。焦点=真；
},
handleDeleteKey(索引){
this.list.splice(索引，1);
},
手柄向下键(e) {
const { altKey，ctrlKey，shiftKey，Key，code }=e；
如果(!CODE_CONTROL.includes(key)) {
如果(!this.keyRange.includes(代码))返回；
设控制键=" "；
[
{ key: altKey，text: Alt }，
{ key: ctrlKey，text: Ctrl }，
{ key: shiftKey，text: Shift }，
].forEach((curKey)={
if (curKey.key) {
if(控制键)控制键=" "；
controlKey=curKey.text
}
});
如果（关键){
if(控制键)控制键=" "；
controlKey=key。toupper case()；
}
this.addHotkey({
文本：控制键，
controlKey: { altKey，ctrlKey，shiftKey，Key，code }，
});
}
e。防止默认()；
},
addHotkey(data) {
如果(这个。列表。长度这个。列表。一些((项)=数据。text===item。正文))
返回；
如果（
this.list.length
这个。列表。长度。tostring()===this。最大值tostring()
)
返回；
this.list.push(数据);
},
},
};
/脚本
样式范围
@关键帧闪烁{
0% {
不透明度：0;
}
100% {
不透明度：1;
}
}。快捷键输入{
位置：相对；
边框：1px固体# dcdcdc
边框-半径：4px
背景色：# fff
颜色：# 333;
宽度：100%;
高度：40px
/*填充：2px 0；*/
光标：文本；
过渡：边框颜色0.2秒三次贝塞尔(0.645,0.045,0.355,1);
}。快捷键输入：焦点{
边框颜色：# 188cff
盒影：0 0 4px rgba(24，140，255，0.38)；
}。快捷键-key-input.cursor:after {
内容："";
动画：眨眼1.2秒缓解0s无限；
字体大小：18px
位置：绝对；
top:2px；
左：12px
}。快捷键输入范围{
位置：相对；
显示：内嵌-块；
框大小：边框-框；
背景色：# f4f4f5
边框颜色：# e 9 e 9 EB
颜色：# 909399;
填充：0 22px 0 8px
高度：28px
字体大小：13px
行高：28px
边框-半径：4px
保证金：5px
}。快捷键输入。占位符{
位置：绝对；
top:10px；
左：11px
颜色：# c 0 C4 cc；
字体大小：13px
文本缩进：4px
字体：400 13.3333像素Arial字体
}。快捷键输入范围我{
位置：绝对；
top:6px；
右：4px
内容："";
背景：url(data:image/svg xml，