一、先看看效果
二、实现方法
1、实现思路: 使用vue-draggable-resizable
组件实现;组件github地址: https://github.com/mauricius/vue-draggable-resizable
2、具体操作:
- 1)npm安装
npm install --save vue-draggable-resizable
- 2)全集引入和注册组件
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
- 3)页面中使用
<template>
<div class="parent-con">
<vue-draggable-resizable w="auto"
h="auto"
:resizable="false">
<div style="transform: scale(1)"
ref="dragCon"
@wheel.prevent="handleWheel($event)">
需要滚动缩放和拖拽的页面内容
</div>
</vue-draggable-resizable>
</div>
</template>
methods: {
// 监听滚轮滚动事件
handleWheel (event) {
let obj = this.$refs.dragCon;
return this.tableZoom(obj, event);
},
tableZoom (obj, event) {
// 设置元素缩放 这里使用transform: scale实现;你也可以使用 zoom 来实现
let scale = obj.style.transform.replace('scale(', '').replace(')', '') * 100;
scale += event.wheelDelta / 10;
// 限制最小缩小到20%
if (scale < 20) {
scale = 20
}
// 限制最大可放大到3倍
if (scale > 300) {
scale = 300
}
// 设置元素transform
if (scale > 0) {
obj.style.transform = `scale(${
scale / 100})`;
}
return false;
},
}
这样就实现了