Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
璃白.
Finger Dance
提交
de9f6648
Finger Dance
项目概览
璃白.
/
Finger Dance
大约 1 年 前同步成功
通知
2
Star
3
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Finger Dance
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
de9f6648
编写于
1月 25, 2021
作者:
郭
郭维嘉
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:添加键盘点击事件
上级
3a520971
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
45 addition
and
17 deletion
+45
-17
src/assets/js/mock.js
src/assets/js/mock.js
+4
-5
src/components/key.vue
src/components/key.vue
+16
-10
src/components/keyboard.vue
src/components/keyboard.vue
+14
-0
src/store/index.js
src/store/index.js
+11
-2
未找到文件。
src/assets/js/mock.js
浏览文件 @
de9f6648
...
...
@@ -31,7 +31,7 @@ const keys = [
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
]
"
,
subName
:
"
}
"
},
{
id
:
4
,
type
:
"
Fill
"
,
primaryName
:
"
\\
"
,
subName
:
"
|
"
},
// 第三行
{
id
:
4
,
type
:
"
Caps Lock
"
,
primaryName
:
"
Caps
Lock
"
,
subName
:
""
},
{
id
:
4
,
type
:
"
Caps Lock
"
,
primaryName
:
"
CapsLock
"
,
subName
:
""
},
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
A
"
,
subName
:
""
},
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
S
"
,
subName
:
""
},
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
D
"
,
subName
:
""
},
...
...
@@ -42,7 +42,7 @@ const keys = [
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
K
"
,
subName
:
""
},
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
L
"
,
subName
:
""
},
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
;
"
,
subName
:
"
:
"
},
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
,
"
,
subName
:
"
\"
"
},
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
'
"
,
subName
:
'
"
'
},
{
id
:
4
,
type
:
"
Fill
"
,
primaryName
:
"
Enter
"
,
subName
:
""
},
// 第四行
{
id
:
4
,
type
:
"
Shift
"
,
primaryName
:
"
Shift
"
,
subName
:
""
},
...
...
@@ -60,10 +60,9 @@ const keys = [
// 第五行
{
id
:
4
,
type
:
"
Function
"
,
primaryName
:
"
Ctrl
"
,
subName
:
""
},
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
Alt
"
,
subName
:
""
},
// { id: 4, type: "Function", primaryName: "Command", subName: "" },
{
id
:
4
,
type
:
"
Fill
"
,
primaryName
:
""
,
subName
:
""
},
{
id
:
4
,
type
:
"
Fill
"
,
primaryName
:
"
"
,
subName
:
""
},
{
id
:
4
,
type
:
"
Letter
"
,
primaryName
:
"
Alt
"
,
subName
:
""
},
{
id
:
4
,
type
:
"
Function
"
,
primaryName
:
"
Ctrl
"
,
subName
:
""
}
,
{
id
:
4
,
type
:
"
Function
"
,
primaryName
:
"
Ctrl
"
,
subName
:
""
}
];
export
default
keys
;
src/components/key.vue
浏览文件 @
de9f6648
<
template
>
<div
class=
"key
"
:class=
"['key',
{ active: isCurrentKey($store.state.currentKey) }]
"
:style="{
'min-width': keyWidth + 'px',
flex: type === 'Fill' ? 1 : 'none'
,
flex: type === 'Fill' ? 1 : 'none'
}"
>
<div
class=
"multiple"
v-if=
"subName"
>
...
...
@@ -19,16 +19,16 @@ export default {
props
:
{
type
:
{
type
:
String
,
default
:
""
,
default
:
""
},
primaryName
:
{
type
:
String
,
default
:
""
,
default
:
""
},
subName
:
{
type
:
String
,
defualt
:
""
,
}
,
defualt
:
""
}
},
computed
:
{
keyWidth
()
{
...
...
@@ -55,11 +55,14 @@ export default {
break
;
}
return
keyWidth
;
},
},
data
()
{
return
{};
}
},
methods
:
{
isCurrentKey
(
key
)
{
if
(
key
===
null
)
return
false
;
return
key
.
toLowerCase
()
===
this
.
primaryName
.
toLowerCase
();
}
}
};
</
script
>
...
...
@@ -79,5 +82,8 @@ export default {
line-height: 1em;
}
}
&.active {
opacity: 0.4;
}
}
</
style
>
src/components/keyboard.vue
浏览文件 @
de9f6648
...
...
@@ -14,6 +14,20 @@ export default {
list
:
mock
};
},
mounted
()
{
this
.
keyboardInit
();
},
methods
:
{
keyboardInit
()
{
document
.
addEventListener
(
"
keydown
"
,
e
=>
{
e
.
preventDefault
();
this
.
$store
.
commit
(
"
onkeydown
"
,
e
.
key
);
});
document
.
addEventListener
(
"
keyup
"
,
()
=>
{
this
.
$store
.
commit
(
"
onkeyup
"
);
});
}
}
};
</
script
>
...
...
src/store/index.js
浏览文件 @
de9f6648
...
...
@@ -4,8 +4,17 @@ import Vuex from "vuex";
Vue
.
use
(
Vuex
);
export
default
new
Vuex
.
Store
({
state
:
{},
mutations
:
{},
state
:
{
currentKey
:
""
},
mutations
:
{
onkeydown
(
state
,
val
)
{
state
.
currentKey
=
val
;
},
onkeyup
(
state
)
{
state
.
currentKey
=
null
;
}
},
actions
:
{},
modules
:
{}
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录