首页 技术设计 前端 vue

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

# 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>
# 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>