vue中滚轮缩放事件

&ACE&2023-12-10 13:33

在Vue中，可以使用原生JS的滚轮事件监听来实现滚轮缩放：

首先在模板中给需要监听滚轮事件的元素添加一个ref属性，用于在Vue中获取元素节点。

html 复制代码

<template>
  <div ref="scale">
    <!-- 需要缩放的内容 -->
  </div>
</template>

在Vue中监听元素的滚轮事件，并根据滚轮的方向来调整缩放比例。

javascript 复制代码

<script>
export default {
  mounted() {
    const scaleEle = this.$refs.scale;
    let scale = 1; // 初始缩放比例为1
    scaleEle.addEventListener('wheel', (e) => {
      e.preventDefault(); // 阻止默认滚轮事件
      let delta = Math.max(-1, Math.min(1, e.deltaY)); // 获取滚轮方向
      scale += delta * 0.1; // 根据滚轮方向调整缩放比例
      scale = Math.max(0.1, Math.min(scale, 10)); // 设置缩放比例的最小值和最大值

      // 设置元素的缩放样式
      scaleEle.style.transform = `scale(${scale})`;
    });
  },
};
</script>

在上述代码中，我们监听了元素的滚轮事件，并根据滚轮的方向来调整缩放比例，最后设置元素的缩放样式。注意要调用e.preventDefault()来阻止默认的滚轮事件，否则会导致页面滚动。

另外，上述代码仅适用于普通的滚动缩放。如果需要实现类似Google地图的地图缩放效果，需要计算鼠标位置，以及根据缩放比例调整滚轮的缩放程度等，实现起来较复杂。