vue 实现页面缩放

Vue 实现页面缩放的常用方法

使用 CSS transform 缩放

在 Vue 组件的样式中，通过 transform: scale() 控制整个页面的缩放比例。
示例代码：

<template>
  <div class="container" :style="{ transform: `scale(${scale})` }">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1 // 默认缩放比例为1
    }
  },
  methods: {
    zoomIn() {
      this.scale += 0.1;
    },
    zoomOut() {
      this.scale = Math.max(0.5, this.scale - 0.1);
    }
  }
}
</script>

<style>
.container {
  transform-origin: 0 0; /* 默认从左上角缩放 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}
</style>

监听浏览器快捷键

通过 window.addEventListener 监听 Ctrl + +/- 快捷键实现缩放：

mounted() {
  window.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key === '+') {
      this.scale += 0.1;
      e.preventDefault();
    } else if (e.ctrlKey && e.key === '-') {
      this.scale = Math.max(0.5, this.scale - 0.1);
      e.preventDefault();
    }
  });
}

响应式缩放

根据窗口尺寸自动调整缩放比例，适合大屏适配场景：

methods: {
  handleResize() {
    const baseWidth = 1920; // 设计稿基准宽度
    this.scale = window.innerWidth / baseWidth;
  }
},
mounted() {
  window.addEventListener('resize', this.handleResize);
  this.handleResize(); // 初始化
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

注意事项

• 缩放可能影响布局，建议配合 transform-origin 调整缩放原点
• 对于需要保持比例的缩放，可锁定宽高比计算
• 缩放后需考虑滚动条、定位元素等细节调整
• 移动端可能需要添加 viewport meta 标签配合