前端vue3项目 控制谷歌浏览器的自动的缩放功能，当用户放大页面到170%，只要鼠标点击页面就可以缩放为100%

在Vue3项目中，如果你想控制谷歌浏览器的自动缩放功能，并且在用户放大页面到170%后，通过点击页面将缩放级别重置为100%，你可以通过监听缩放事件来实现这个功能。

首先，你需要了解浏览器并不支持直接通过JavaScript来禁止或控制浏览器的默认缩放行为。但是，你可以通过监听`wheel`事件来检测缩放动作，并通过一些技巧来尝试恢复到100%的缩放级别。

以下是一个基于Vue3的示例代码片段，展示了如何监听鼠标滚轮事件，并尝试将页面缩放级别重置为100%：

// 在你的Vue组件中
export default {
  // ...其他选项...
  mounted() {
    window.addEventListener('wheel', this.handleWheel, { passive: false });
  },
  beforeDestroy() {
    window.removeEventListener('wheel', this.handleWheel);
  },
  methods: {
    handleWheel(event) {
      // 检测是否是缩放操作
      if (event.ctrlKey) { // 当按下Ctrl键时，通常表示用户想要进行缩放操作
        // 阻止默认行为
        event.preventDefault();
        
        // 尝试通过设置transform来重置缩放
        document.querySelector('body').style.transform = 'scale(1)';
        document.querySelector('body').style.transition = 'transform 0.2s';

        // 重置transform后，稍作延时再清除，以便有时间触发浏览器的默认缩放恢复行为
        setTimeout(() => {
          document.querySelector('body').style.transform = '';
          document.querySelector('body').style.transition = '';
        }, 50);
      }
    }
  }
}

请注意，这种方法并不是一个官方或稳定的解决方案，它依赖于浏览器的行为可能随时会改变，并且这种方法可能会影响页面上其他需要缩放的功能。此外，不同的浏览器和平台可能有不同的表现。