Vue2/3实现dom拖动，Ctrl+鼠标滚轮放大缩小

1、在Vue2/3中dom拖动，Ctrl+鼠标滚轮放大缩小dom，可以使用@panzoom/panzoom库实现具体实现
2、npm下载插件包 npm install @panzoom/panzoom -S
3、在需要的页面按需引入（也可以全局引入）,详细见下文代码块
4、通过@wheel事件监听鼠标滚轮，调整dom大小（@wheel是只有当我们滚动鼠标滚轮的时候，才会触发）

<template>
  // 需要拖动的dom
    <div ref="dom" @wheel="wheel"></div>
</template>

<script>
import Panzoom from "@panzoom/panzoom";
// 页面挂载的时候就调用方法
export default {
  data () {
    return {
      panzoom: null
    }
  }
  mounted () {
    this.getPanzoomElement()
  },
  methods: {
    // 拖动方法
    getPanzoomElement () {
      // 存放Panzoom用于后面的其他操作
      this.panzoom = Panzoom(this.$refs.dom, {
        // origin: "0 0", // 位置
        maxScale: 2, // 最大比例
        minScale: 0, // 最小比例
        overflow: "auto", // 溢出
        canvas: true, // 是否视为canvas
      });
    }
    // 监听鼠标滚轮
    wheel (event) {
      // 修改为根据鼠标位置缩放
      if (event.ctrlKey) { // 这里可以扩展，比如按下其他案件+滚轮放大缩小等
        const scaleResult = this.panzoom.zoomWithWheel(event);
      }
    }
  }
}
<script>

<template>
  // 需要拖动的dom
    <div ref="wheelDom" @wheel="wheel"></div>
</template>

<script setup>
// 按需引入
import { onMounted, reactive, toRefs,ref } from "vue";
import Panzoom from "@panzoom/panzoom"; // 引入插件
const wheelDom = ref(null); // ref获取dom
// 响应式数据
const state = reactive({
  panzoom: null
})
// 拖动方法
const getPanzoomElement = () => {
  // 存放Panzoom用于后面的其他操作
  state.panzoom = Panzoom(wheelDom.value, {
    // origin: "0 0", // 位置
    maxScale: 2, // 最大比例
    minScale: 0, // 最小比例
    overflow: "auto", // 溢出
    canvas: true, // 是否视为canvas
  });
}
// 监听鼠标滚轮
const wheel = (event) => {
  // 修改为根据鼠标位置缩放
  if (event.ctrlKey) { // 这里可以扩展，比如按下其他案件+滚轮放大缩小等
    const scaleResult = this.panzoom.zoomWithWheel(event);
  }
}
// 页面挂载的时候就调用方法
onMounted(() => {
  getPanzoomElement()
});
<script>