封装拖拽组件实现对话框拖拽效果

弹窗组件中使用

<template #title>
   <div ref="modalTitleRef" style="width: 100%; cursor: move">{{ title }}</div>
</template>
<template #modalRender="{ originVNode }">
   <div :style="transformStyle">
     <component :is="originVNode" />
   </div>
</template>

import { Draggable } from '@/mixins/DraggableMixin'
mixins: [Draggable],

/**
 * 拖拽组件
 * 所有弹窗组件实现拖拽的公用组件
 */
export const Draggable = {
  data() {
    return {
      startX: 0,
      startY: 0,
      isDragging: false,
      transformX: 0,
      transformY: 0
    }
  },
  methods: {
    handleMouseMove(event) {
      if (this.isDragging) {
        const offsetX = event.clientX - this.startX;
        const offsetY = event.clientY - this.startY;
        this.transformX += offsetX;
        this.transformY += offsetY;
        this.startX = event.clientX;
        this.startY = event.clientY;
      }
    },
    handleMouseDown(event) {
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.isDragging = true;
    },
    handleMouseUp() {
      this.isDragging = false;
    },
    // 销毁挂载的事件
    removeEventListeners() {
      console.log('销毁')
      const modalTitleRef = this.$refs.modalTitleRef;
      if (modalTitleRef) {
        modalTitleRef.removeEventListener('mousedown', this.handleMouseDown);
      }
      window.removeEventListener('mousemove', this.handleMouseMove);
      window.removeEventListener('mouseup', this.handleMouseUp);
    },
  },
  computed: {
    transformStyle() {
      return {
        transform: `translate(${this.transformX}px, ${this.transformY}px)`,
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log('mounted');
      const modalTitleRef = this.$refs.modalTitleRef;
      if (modalTitleRef) {
        modalTitleRef.addEventListener('mousedown', this.handleMouseDown);
      }
      window.addEventListener('mousemove', this.handleMouseMove);
      window.addEventListener('mouseup', this.handleMouseUp);
    });
  },
  beforeUnmount() {
    console.log('Unmounted');
    this.removeEventListeners()
  }
}