vue项目中实现元素的滚轮缩放以及拖拽效果

一、先看看效果

二、实现方法

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;
  },
}

这样就实现了