浏览器页面设置部分组件缩放

˙o孤灯残月影ﾁﾗｯ

于 2025-05-15 12:01:03 发布

阅读量176

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js css

本文链接：https://blog.csdn.net/qq_65292321/article/details/147979063

需求：如下图，根据产品要求，需要将浏览器页面中部分内容需要缩放，部分内容禁止缩放。

原理：鼠标移动事件+鼠标滚轮事件+transform:scale动态控制页面缩放

方案：

1.首先禁用整个页面滚轮缩放事件

<template>
  <div class="common-layout" @wheel="handleWheel">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>
            <Child>需要缩放子组件</Child>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
//禁用整个页面滚轮事件
const handleWheel = (event) => {
    event.preventDefault()
    return
}
</script>

2.在子组件中进行缩放控制

<template>
  <div class="child" @mousemove="handleMouseMove"
    @wheel="handleWheel" ref="scalableComponent" :style="componentStyle">
    
  </div>
</template>
<script setup>
const scalableComponent = ref(null)
const scaleLevel = ref(1)//缩放值

const mousePosition = ref({ x: 0, y: 0 })  
const componentRect = ref({ left: 0, top: 0 })
//计算缩放样式
const componentStyle = computed(() => {
  const { x, y } = mousePosition.value
  const { left, top } = componentRect.value
  const originX = x - left
  const originY = y - top
 
  return {
    transform: `scale(${scaleLevel.value})`,
    transformOrigin: `${originX}px ${originY}px`
  }
})
// 鼠标移动事件处理
const handleMouseMove = (event) => {
  if (!scalableComponent.value) return
  
  const rect = scalableComponent.value.getBoundingClientRect()
  componentRect.value = rect
  
  mousePosition.value = {
    x: event.clientX,
    y: event.clientY
  }
}

// 滚轮事件处理
const handleWheel = (event) => { 
   // 阻止页面滚动
  event.preventDefault()
  
  // 获取滚轮方向
  const delta = Math.max(-1, Math.min(1, (event.deltaY || -event.detail)))
  
  // 计算新的缩放比例
  const newScale = scaleLevel.value + delta * -0.1
  
  // 限制缩放范围
  scaleLevel.value = Math.min(Math.max(0.5, newScale), 2)

  
 
  console.log('允许缩放')
}



</script>

最终实现效果组件随鼠标移动而移动，随滚动滚动而缩放