Vue+js鼠标拖动图片滚轮缩放图片更自由

2023-11-09 07:48:15

使用Vue.js、JavaScript和CSS轻松实现鼠标拖动和滚轮缩放图片。
在这篇文章中，我们将探讨如何创建交互式图像查看器，允许用户平滑地拖动和缩放图像，从而更轻松地查看和浏览图片。
无论是用于电子商务网站，还是用于照片库或在线画廊，这种交互式功能都能显著提高用户体验。

在Vue.js项目中创建交互式图片查看器

添加HTML和CSS

在您的Vue.js项目中，创建一个新的组件文件。在该文件中，添加以下HTML和CSS代码：

<template>
  <div class="image-viewer">
    <img :src="imageSrc" @mousedown="startDrag" @mousemove="dragImage" @mouseup="stopDrag" @wheel="zoomImage" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '', // URL of the image to be displayed
      dragStartX: 0,
      dragStartY: 0,
      isDragging: false,
      scale: 1,
    };
  },
  methods: {
    startDrag(e) {
      this.dragStartX = e.clientX;
      this.dragStartY = e.clientY;
      this.isDragging = true;
    },
    dragImage(e) {
      if (!this.isDragging) {
        return;
      }
      const deltaX = e.clientX - this.dragStartX;
      const deltaY = e.clientY - this.dragStartY;
      this.$refs.image.style.left = `${this.$refs.image.offsetLeft + deltaX}px`;
      this.$refs.image.style.top = `${this.$refs.image.offsetTop + deltaY}px`;
      this.dragStartX = e.clientX;
      this.dragStartY = e.clientY;
    },
    stopDrag() {
      this.isDragging = false;
    },
    zoomImage(e) {
      e.preventDefault();
      const delta = e.deltaY * -0.01;
      this.scale += delta;
      this.$refs.image.style.transform = `scale(${this.scale})`;
    },
  },
};
</script>

<style>
.image-viewer {
  position: relative;
  width: 100%;
  height: 100%;
}

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
}
</style>

注册组件

在您的Vue.js项目的主组件中，导入并注册新创建的组件。

import ImageViewer from './components/ImageViewer.vue';

export default {
  components: {
    ImageViewer,
  },
};

使用组件

在您的Vue.js项目中，您现在可以在模板中使用ImageViewer组件。

<template>
  <div>
    <image-viewer :image-src="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg', // URL of the image to be displayed
    };
  },
};
</script>