当前位置：首页 > VUE

vue 实现页面缩放

2026-01-17 16:50:53VUE

Vue 实现页面缩放的方法

使用 CSS transform 缩放

在 Vue 组件的样式中添加 transform 属性，通过 scale 控制缩放比例。可以通过动态绑定 style 或 class 实现交互式缩放。

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

<script>
export default {
  data() {
    return {
      scale: 1
    }
  }
}
</script>

<style>
.container {
  transform-origin: 0 0;
  transition: transform 0.3s ease;
}
</style>

通过鼠标滚轮控制缩放

监听 wheel 事件，根据滚轮方向调整缩放比例。需要限制最小和最大缩放值避免极端情况。

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

<script>
export default {
  data() {
    return {
      scale: 1,
      minScale: 0.5,
      maxScale: 2
    }
  },
  methods: {
    handleWheel(e) {
      e.preventDefault()
      const delta = e.deltaY > 0 ? -0.1 : 0.1
      this.scale = Math.min(Math.max(this.scale + delta, this.minScale), this.maxScale)
    }
  }
}
</script>

使用浏览器原生缩放

通过修改 meta viewport 标签实现页面缩放，这种方法会影响整个页面布局。

<template>
  <div>
    <meta name="viewport" :content="`width=device-width, initial-scale=${scale}, minimum-scale=${scale}, maximum-scale=${scale}, user-scalable=no`">
    <!-- 页面内容 -->
  </div>
</template>

结合手势库实现触摸缩放

使用 hammer.js 等手势库识别 pinch 手势，实现更自然的触摸缩放体验。

import Hammer from 'hammerjs'

export default {
  mounted() {
    const hammertime = new Hammer(this.$el)
    hammertime.get('pinch').set({ enable: true })

    hammertime.on('pinchmove', (e) => {
      this.scale = Math.min(Math.max(e.scale, this.minScale), this.maxScale)
    })
  }
}