JS实现点击图片放大缩小及拖拽功能

<template>
  <div style="height: 90vh;">
    <div
      class="image-container"
      @mousedown="startDrag"
      @mouseup="stopDrag"
      @mousemove="drag"
      @wheel="handleWheel"
    >
      <img
        :src="https://www.jb51.net/imgSrc"
        :style="{ transform: `scale(${scale})`, cursor: isDragging ? 'grabbing' : 'grab' }"
        ref="image"
      />
      <!-- @click="toggleZoom"  点击放大-->
    </div>
  </div>
</template>

<script>
import testImg from './testImg.jpeg'; // 导入图片
 
export default {
  name: 'ImageView',
  props: {
    // 图片路径
    imgSrc: {
      type: String,
      default: () => testImg, // 没有传值时使用默认图片
    }
  },
  data () {
    return {
      scale: 1, // 初始缩放比例
      isDragging: false, // 是否正在拖拽
      lastMouseX: 0, // 上一次鼠标 X 坐标
      lastMouseY: 0, // 上一次鼠标 Y 坐标
      offsetX: 0, // 图片相对容器的 X 偏移量
      offsetY: 0, // 图片相对容器的 Y 偏移量
      imageWidth: 0, // 图片实际宽度
      imageHeight: 0, // 图片实际高度
    };
  },
  mounted () {
    const img = this.$refs.image; // 获取图片元素
    this.imageWidth = img.naturalWidth; // 获取图片的实际宽度
    this.imageHeight = img.naturalHeight; // 获取图片的实际高度
    this.centerImage(); // 初始化时居中图片
  },
  methods: {
    // 居中图片的方法
    centerImage () {
      const container = this.$el.querySelector('.image-container'); // 获取容器
      const containerWidth = container.clientWidth; // 容器宽度
      const containerHeight = container.clientHeight; // 容器高度
 
      // 计算居中后的 X 和 Y 偏移量
      const centeredX = (containerWidth - this.imageWidth * this.scale) / 2;
      const centeredY = (containerHeight - this.imageHeight * this.scale) / 2;
 
      this.offsetX = centeredX; // 更新 X 偏移量
      this.offsetY = centeredY; // 更新 Y 偏移量
 
      // 设置图片的新位置
      this.$refs.image.style.left = `${centeredX}px`;
      this.$refs.image.style.top = `${centeredY}px`;
    },
 
    // 点击图片时切换缩放
    toggleZoom () {
      this.scale = this.scale === 1 ? 2 : 1; // 点击图片时切换缩放比例
    },
 
    // 鼠标按下事件
    startDrag (event) {
      this.isDragging = true; // 标记为正在拖拽
      this.lastMouseX = event.clientX; // 记录当前鼠标 X 坐标
      this.lastMouseY = event.clientY; // 记录当前鼠标 Y 坐标
      this.offsetX = this.$refs.image.offsetLeft; // 记录当前左偏移
      this.offsetY = this.$refs.image.offsetTop; // 记录当前上偏移
    },
 
    // 鼠标抬起事件
    stopDrag () {
      this.isDragging = false; // 停止拖拽
    },
 
    // 鼠标移动事件
    drag (event) {
      if (this.isDragging) { // 如果正在拖拽
        const dx = event.clientX - this.lastMouseX; // 计算 X 轴移动距离
        const dy = event.clientY - this.lastMouseY; // 计算 Y 轴移动距离
        const newLeft = this.offsetX + dx; // 计算新的左偏移
        const newTop = this.offsetY + dy; // 计算新的上偏移
 
        // 更新图片的位置
        this.$refs.image.style.left = `${newLeft}px`; // 设置新的左偏移
        this.$refs.image.style.top = `${newTop}px`; // 设置新的上偏移
      }
    },
 
    // 鼠标滚轮事件处理缩放
    handleWheel (event) {
      event.preventDefault(); // 阻止默认的滚动行为
      const scaleChange = event.deltaY > 0 ? 0.1 : -0.1; // 根据滚动方向调整缩放
      this.scale = Math.max(0.2, this.scale + scaleChange); // 限制最小缩放比例为 0.2
    },
  },
};
</script>

<style scoped>
.image-container {
  position: relative; /* 使容器相对定位 */
  overflow: hidden; /* 防止内容超出边界 */
  cursor: grab; /* 默认光标样式 */
  width: 100%; /* 容器宽度 */
  height: 100%; /* 容器高度 */
}
 
img {
  position: absolute; /* 使得 img 可以被拖拽 */
  transition: transform 0.3s; /* 平滑的缩放效果 */
}
</style>