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