Vue2+TS封装一个可全局拖拽的弹窗组件

Vue2+TS封装一个可全局拖拽的弹窗组件

ant组件的弹窗组件不支持拖拽，就很难受
项目里刚好有这个需求，就自己封装了一个

效果图：

vue部分:

<template>
  <div class="image-standard-modal"
       :style="{ top: top + 'px', left: left + 'px' }"
       v-show="visible"
       v-on:mouseenter="onMouseEnter(true)"
       v-on:mouseleave="onMouseLeave">
    <div v-on:mouseenter="onMouseEnter(true)">
      <div class="header"
           v-on:mouseenter="onMouseEnter(true)">
        <span class="title">{{ title }}</span>
        <a-icon class="float-right"
                style="font-size: 18px;"
                type="close" />
        <a-divider />
      </div>
      <div class="body"
           v-on:mouseenter="onMouseEnter(false)">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

script部分:

<script lang="ts">
import {
  Vue, Component, Prop, Emit,
} from 'vue-property-decorator';
import GBackstageBreadcrumb from '@/components/common/GBackstageBreadcrumb.vue';

@Component({
  name: 'DragAndDropModal',
  components: { BackstageBreadcrumb: GBackstageBreadcrumb },
})
export default class DragAndDropModal extends Vue {
  @Prop({ default: true }) visible!: boolean;

  @Prop({ default: '影像标准信息' }) title!: string;

  top = 200; // 弹窗的垂直位置

  left: any = '50%'; // 弹窗的水平位置

  dragging = false; // 是否正在拖拽

  diffX = 0; // 鼠标在弹窗内的水平偏移量

  diffY = 0; // 鼠标在弹窗内的垂直偏移量

  // 鼠标进入弹窗区域
  handleMouseDown(event) {
    event.preventDefault();
    this.dragging = true;
    this.diffX = event.clientX - event.target.getBoundingClientRect().left;
    this.diffY = event.clientY - event.target.getBoundingClientRect().top;
  }

  // 鼠标移动事件
  handleMouseMove(event) {
    if (this.dragging) {
      this.left = event.clientX - this.diffX;
      this.top = event.clientY - this.diffY;
    }
  }

  // 鼠标松开事件
  handleMouseUp() {
    this.dragging = false;
  }

  // 鼠标进入弹窗区域注册监听鼠标
  onMouseEnter(type) {
    console.log(type);
    if (type) {
      document.addEventListener('mousedown', this.handleMouseDown);
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
    } else {
      // 鼠标离开弹窗区域取消监听鼠标
      this.onMouseLeave();
    }
  }

  // 鼠标离开弹窗区域取消监听鼠标
  onMouseLeave() {
    if (this.dragging) {
      return;
    }
    document.removeEventListener('mousedown', this.handleMouseDown);
    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('mouseup', this.handleMouseUp);
  }
}
</script>

style部分:

<style scoped lang='less'>
// 分割线
.ant-divider-horizontal {
  margin: 24px 0 0 0 !important;
}
.image-standard-modal{
  position: fixed; // 定位到最外层
  top: 100;
  left: 100;
  min-width: 400px;
  z-index: 1000;
  padding: 98px 24px 24px 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  .header {
    position: absolute;
    top: 0;
    left: 0;
    padding: 24px 24px 0 24px;
    background-color: white;
    width: 100%;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }
  .body{
    min-height: 200px;
    max-height: 70vh;
  }
}
</style>

完整代码：

<template>
  <div class="image-standard-modal"
       :style="{ top: top + 'px', left: left + 'px' }"
       v-show="visible"
       v-on:mouseenter="onMouseEnter(true)"
       v-on:mouseleave="onMouseLeave">
    <div v-on:mouseenter="onMouseEnter(true)">
      <div class="header"
           v-on:mouseenter="onMouseEnter(true)">
        <span class="title">{{ title }}</span>
        <a-icon class="float-right"
                style="font-size: 18px;"
                type="close" />
        <a-divider />
      </div>
      <div class="body"
           v-on:mouseenter="onMouseEnter(false)">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Vue, Component, Prop, Emit,
} from 'vue-property-decorator';
import GBackstageBreadcrumb from '@/components/common/GBackstageBreadcrumb.vue';

@Component({
  name: 'DragAndDropModal',
  components: { BackstageBreadcrumb: GBackstageBreadcrumb },
})
export default class DragAndDropModal extends Vue {
  @Prop({ default: true }) visible!: boolean;

  @Prop({ default: '影像标准信息' }) title!: string;

  top = 200; // 弹窗的垂直位置

  left: any = '50%'; // 弹窗的水平位置

  dragging = false; // 是否正在拖拽

  diffX = 0; // 鼠标在弹窗内的水平偏移量

  diffY = 0; // 鼠标在弹窗内的垂直偏移量

  // 鼠标进入弹窗区域
  handleMouseDown(event) {
    event.preventDefault();
    this.dragging = true;
    this.diffX = event.clientX - event.target.getBoundingClientRect().left;
    this.diffY = event.clientY - event.target.getBoundingClientRect().top;
  }

  // 鼠标移动事件
  handleMouseMove(event) {
    if (this.dragging) {
      this.left = event.clientX - this.diffX;
      this.top = event.clientY - this.diffY;
    }
  }

  // 鼠标松开事件
  handleMouseUp() {
    this.dragging = false;
  }

  // 鼠标进入弹窗区域注册监听鼠标
  onMouseEnter(type) {
    console.log(type);
    if (type) {
      document.addEventListener('mousedown', this.handleMouseDown);
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
    } else {
      // 鼠标离开弹窗区域取消监听鼠标
      this.onMouseLeave();
    }
  }

  // 鼠标离开弹窗区域取消监听鼠标
  onMouseLeave() {
    if (this.dragging) {
      return;
    }
    document.removeEventListener('mousedown', this.handleMouseDown);
    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('mouseup', this.handleMouseUp);
  }
}
</script>

<style scoped lang='less'>
// 分割线
.ant-divider-horizontal {
  margin: 24px 0 0 0 !important;
}

.image-standard-modal {
  position: fixed; // 定位到最外层
  top: 100;
  left: 100;
  min-width: 400px;
  z-index: 1000;
  padding: 98px 24px 24px 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);

  .header {
    position: absolute;
    top: 0;
    left: 0;
    padding: 24px 24px 0 24px;
    background-color: white;
    width: 100%;

    .title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }

  .body {
    min-height: 150px;
    max-height: 70vh;
  }
}
</style>

在其他组件使用：

    // 引入
    import DragAndDropModal from '@/map/DragAndDropModal.vue';
    
    // 注册
    @Component({
  	  name: 'OpenLayerMapRightLayout',
 	  components: {
        DragAndDropModal,
     },
   })
 	// 使用
    <DragAndDropModal>可拖拽弹窗</DragAndDropModal>