Vue 鼠标滚轮缩放图片的实现
@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 秒后隐藏缩放百分比，减少了不必要的手动定时器管理。
<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>