Vue3监听滚轮加ctrl键控制放大缩小

const scale = ref(1); // 初始缩放级别
const zoomSpeed = 0.1; // 缩放速度
const zoomableElement = ref<HTMLElement | null>(null);
const handleWheel1 = event => {
  if (event.ctrlKey) {
    // 阻止默认的页面滚动行为
    event.preventDefault();
    // 判断滚轮方向：向上放大，向下缩小
    if (event.deltaY < 0) {
      if (scale.value >= 2) {
        return; // 避免放大过大
      }
      scale.value += zoomSpeed; // 放大
    } else if (scale.value > zoomSpeed) {
      // 避免缩放过小导致无法看清内容
      if (scale.value <= 0.5) {
        return; // 避免缩小过小
      }
      scale.value -= zoomSpeed; // 缩小
    }
    //  zoomableElement.value.style.transform = `scale(${scale.value})`; // 应用缩放变换
  }
};

onMounted(() => {
  zoomableElement.value = document.getElementById('zoomableElement');
  if (zoomableElement.value) {
    zoomableElement.value.addEventListener('wheel', handleWheel1);
  }
});

onUnmounted(() => {
  if (zoomableElement.value) {
    zoomableElement.value.removeEventListener('wheel', handleWheel1);
  }
});