vue 缩放组件实现
实现 Vue 缩放组件的核心方法
使用 CSS transform 实现基础缩放
通过动态绑定 transform: scale() 样式实现缩放效果。在 Vue 组件的模板中添加需要缩放的元素，并通过数据控制缩放比例：
<template>
<div class="scalable" :style="{ transform: `scale(${scale})` }">
<!-- 可缩放内容 -->
</div>
</template>
<script>
export default {
data() {
return { scale: 1 }
}
}
</script>添加鼠标滚轮事件监听
通过 @wheel 事件监听滚轮动作，动态调整缩放比例。注意需阻止默认事件避免页面滚动：
<template>
<div @wheel="handleWheel" class="scalable" :style="{ transform: `scale(${scale})` }">
<!-- 内容 -->
</div>
</template>
<script>
export default {
methods: {
handleWheel(e) {
e.preventDefault();
this.scale += e.deltaY * -0.01;
this.scale = Math.min(Math.max(0.5, this.scale), 3); // 限制缩放范围
}
}
}
</script>进阶实现：支持拖拽与缩放组合
添加拖拽功能
结合 @mousedown、@mousemove 和 @mouseup 事件实现拖拽。需记录初始位置和偏移量：
data() {
return {
isDragging: false,
startX: 0,
startY: 0,
translateX: 0,
translateY: 0
}
},
methods: {
startDrag(e) {
this.isDragging = true;
this.startX = e.clientX - this.translateX;
this.startY = e.clientY - this.translateY;
},
onDrag(e) {
if (!this.isDragging) return;
this.translateX = e.clientX - this.startX;
this.translateY = e.clientY - this.startY;
},
endDrag() {
this.isDragging = false;
}
}组合缩放与位移样式
在模板中同时应用缩放和位移变换：
<div
@wheel="handleWheel"
@mousedown="startDrag"
@mousemove="onDrag"
@mouseup="endDrag"
:style="{
transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`
}">
</div>性能优化与边界处理
添加动画过渡
通过 CSS transition 使缩放更平滑：
.scalable {
transition: transform 0.1s ease-out;
}限制缩放中心点
通过计算鼠标位置调整缩放中心，需使用 transform-origin：
handleWheel(e) {
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
e.target.style.transformOrigin = `${x}px ${y}px`;
// 后续缩放逻辑...
}销毁事件监听器
在组件销毁时移除全局事件监听（如拖拽期间的 document 事件）：
beforeUnmount() {
document.removeEventListener('mousemove', this.onDrag);
document.removeEventListener('mouseup', this.endDrag);
}
