当前位置：首页 > VUE

vue实现页面鹰眼效果

2026-02-25 00:55:57VUE

实现思路

在Vue中实现页面鹰眼效果，通常需要创建一个缩略图导航组件，通过监听主视图的滚动或缩放事件，同步更新鹰眼视图的显示区域。核心步骤包括生成缩略图、定位可视区域、交互同步等。

vue实现页面鹰眼效果

核心代码示例

缩略图生成

通过Canvas生成主内容的缩略图，需注意跨域问题：

vue实现页面鹰眼效果

// 在mounted钩子中生成缩略图
mounted() {
  const container = this.$refs.mainContent;
  html2canvas(container).then(canvas => {
    this.thumbnail = canvas.toDataURL();
  });
}

可视区域定位

计算主视图可见区域对应的缩略图位置：

computed: {
  viewportPosition() {
    const mainEl = this.$refs.mainContent;
    const scale = this.thumbnailWidth / mainEl.scrollWidth;
    return {
      left: mainEl.scrollLeft * scale,
      top: mainEl.scrollTop * scale,
      width: mainEl.clientWidth * scale,
      height: mainEl.clientHeight * scale
    };
  }
}

双向同步交互

实现鹰眼拖动与主视图滚动的联动：

methods: {
  handleThumbnailDrag(e) {
    const rect = this.$refs.thumbnail.getBoundingClientRect();
    const x = (e.clientX - rect.left) / this.thumbnailRatio;
    const y = (e.clientY - rect.top) / this.thumbnailRatio;

    this.$refs.mainContent.scrollTo({
      left: x - this.viewportPosition.width/2,
      top: y - this.viewportPosition.height/2
    });
  },

  syncThumbnailView() {
    // 主视图滚动时更新鹰眼定位框
    this.$refs.viewportIndicator.style.transform = 
      `translate(${this.viewportPosition.left}px, ${this.viewportPosition.top}px)`;
  }
}

完整组件结构

<template>
  <div class="eagle-eye-container">
    <div ref="mainContent" @scroll="syncThumbnailView">
      <!-- 主内容区域 -->
    </div>

    <div class="thumbnail-wrapper">
      <img 
        ref="thumbnail" 
        :src="thumbnail" 
        @mousedown="handleThumbnailDrag"
      />
      <div 
        ref="viewportIndicator" 
        class="viewport-indicator"
        :style="{
          width: viewportPosition.width + 'px',
          height: viewportPosition.height + 'px'
        }"
      ></div>
    </div>
  </div>
</template>

样式关键点

.thumbnail-wrapper {
  position: relative;
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
}

.viewport-indicator {
  position: absolute;
  border: 2px solid red;
  pointer-events: none;
  transition: transform 0.2s ease;
}