Vue 鼠标滚轮缩放图片的实现

刘志辉2024-12-06 12:35

@wheel="handleZoom" 监听鼠标滚轮事件

event.deltaY < 0 代表向上滚动

event.deltaY > 0 代表向下滚动

使用computed处理scale比例的变化

const imageStyle = computed(() => ({

transform: `translate(-50%, -50%) scale(${scale.value})`,

}));

利用 computed 计算 scale：通过 scaleOffset 控制缩放比例，scale 由计算属性动态计算，避免了直接修改 scale 的值。
scalePercentage 动态计算：缩放百分比通过 computed 动态计算，实时反映当前缩放比例。
watch 监听 scale 的变化：使用 watch 来监听 scale 的变化，自动显示并在 1 秒后隐藏缩放百分比，减少了不必要的手动定时器管理。

javascript 复制代码

<template>
  <!-- 图片 -->
  <div class="img_bigbox" @wheel="handleZoom">
    <img :style="imageStyle" src="/img/tibet-2.jpg" ref="image" />
    <div class="scale-indicator" v-if="show">{{ scalePercentage }}%</div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
const show = ref(false);
// 获取图片元素引用
const image = ref(null);
// 定义初始缩放比例
const scale = ref(1);

// 设置缩放增量
const zoomIncrement = 0.07;

// 计算图片的样式
const imageStyle = computed(() => ({
  transform: `translate(-50%, -50%) scale(${scale.value})`,
}));

// 显示缩放比例（转换为百分比）
const scalePercentage = computed(() => Math.round(scale.value * 100));

// 图片缩放处理函数
const handleZoom = (event) => {
  show.value = true;
  // 设置定时器
  setTimeout(() => {
    show.value = false;
  }, 1000);
  // 判断滚动方向并设置新的缩放比例
  if (event.deltaY < 0) {
    // 向上滚动
    scale.value += zoomIncrement;
  } else {
    // 向下滚动
    scale.value -= zoomIncrement;
    scale.value = Math.max(scale.value, 0.3); // 确保最小缩放比例为0.3
  }
};
</script>

<style scoped>
.img_bigbox img {
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: transform 0.2s ease; /* 平滑缩放 */
}

.scale-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
}
</style>