feat:添加键盘点击事件

src/assets/js/mock.js

@@ -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

 <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

@@ -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

@@ -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: {}
 });