监听空格键控制文章音频播放

src/components/common/AudioLine.vue

@@ -256,7 +256,7 @@ export default {
       _this.$emit("handleListenRead", false);
       _this.isClick = false;
     });
-
+    window.addEventListener("keydown", this.handleKeydown);
     this.$nextTick(() => {
       document
         .getElementsByClassName("el-slider__button-wrapper")[0]
@@ -274,6 +274,17 @@ export default {
   activated() {},
   // 方法集合
   methods: {
+    handleKeydown(event) {
+      if (event.key === " " || event.keyCode === 32) {
+        // 空格键被按下
+        event.preventDefault();
+        if (this.audio.playing) {
+          this.$refs[this.audioId].pause();
+        } else {
+          this.$refs[this.audioId].play();
+        }
+      }
+    },
     PlayAudio() {
       let audioId = this.audioId;
       let audio = document.getElementsByTagName("audio");
@@ -458,7 +469,9 @@ export default {
   // 生命周期-更新之前
   beforUpdate() {},
   // 生命周期-销毁之前
-  beforeDestory() {},
+  beforeDestory() {
+    window.removeEventListener("keydown", this.handleKeydown);
+  },
   // 生命周期-销毁完成
   destoryed() {},
 };