WXL
2025-09-28 84d5f2ddb619b227a6f8b2e331326bc824dd68d5
src/components/CustomImageViewer/index.vue
@@ -87,6 +87,11 @@
      if (!newVal) {
        this.showTip = false;
        this.tipMessage = '';
        this.removeKeyListener();
      } else {
        this.$nextTick(() => {
          this.addKeyListener();
        });
      }
    }
  },
@@ -117,7 +122,6 @@
    showTipMessage(message) {
      this.tipMessage = message;
      this.showTip = true;
      // 2秒后自动隐藏提示
      setTimeout(() => {
        this.hideTip();
      }, 2000);
@@ -128,7 +132,39 @@
    },
    handleError() {
      console.error(`图片加载失败: ${this.currentUrl}`);
    },
    // 键盘事件处理
    handleKeydown(event) {
      switch(event.key) {
        case 'ArrowLeft':
          event.preventDefault(); // 阻止默认行为
          this.goPrev();
          break;
        case 'ArrowRight':
          event.preventDefault();
          this.goNext();
          break;
        case 'Escape':
          event.preventDefault();
          this.close();
          break;
    }
    },
    addKeyListener() {
      document.addEventListener('keydown', this.handleKeydown);
    },
    removeKeyListener() {
      document.removeEventListener('keydown', this.handleKeydown);
    }
  },
  mounted() {
    if (this.visible) {
      this.addKeyListener();
    }
  },
  beforeUnmount() {
    this.removeKeyListener();
  }
};
</script>