ant design vue modal实现拖拽

直接上代码:

文件目录:

1、globalModal.vue

<template>
  <a-modal
    v-if="footer"
    :class="[modalClass, simpleClass]"
    :visible="showModal"
    :title="title"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="width == '100%' ? '70%' : width"
  >
    <slot name="modalBody" style="minheight: 600px"></slot>
  </a-modal>
  <a-modal
    v-else
    :class="modalClass"
    :visible="showModal"
    :title="title"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="width == '100%' ? '70%' : width"
    :footer="null"
  >
    <slot name="modalBody"></slot>
  </a-modal>
</template>

<script type='text/ecmascript-6'>
import { Modal } from 'ant-design-vue'

var mouseDownX = 0
var mouseDownY = 0
var deltaX = 0
var deltaY = 0
var sumX = 0
var sumY = 0

var header = null
var contain = null
var modalContent = null
export default {
  components: {},
  props: {
    // 容器的类名
    modalClass: {
      type: String,
      default: () => {
        return 'modal-box'
      },
    },
    visible: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    title: {
      type: String,
      default: () => {
        return ''
      },
    },
    width: {
      type: String,
      default: () => {
        return '70%'
      },
    },
    footer: {
      type: Boolean,
      default: () => {
        return true
      },
    },
  },
  data() {
    return {
      showModal: this.visible,
      modalPointer: null,
    }
  },
  computed: {
    simpleClass() {
      return Math.random().toString(36).substring(2)
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initialEvent(this.visible)
    })
  },
  created() {},
  beforeDestroy() {
    this.removeMove()
    window.removeEventListener('mouseup', this.removeUp, false)
  },
  methods: {
    handleOk() {
      this.resetNum()
      this.$emit('ok')
    },
    handleCancel() {
      this.resetNum()
      this.$emit('cancel')
    },
    resetNum() {
      mouseDownX = 0
      mouseDownY = 0
      deltaX = 0
      deltaY = 0
      sumX = 0
      sumY = 0
    },
    handleMove(event) {
      const delta1X = event.pageX - mouseDownX
      const delta1Y = event.pageY - mouseDownY

      deltaX = delta1X
      deltaY = delta1Y
      console.log(delta1X, sumX, delta1Y, sumY)
      modalContent.style.transform = `translate(${delta1X + sumX}px, ${delta1Y + sumY}px)`
    },
    initialEvent(visible) {
      console.log('simpleClass===>', this.simpleClass)
      console.log('document===>', document)
      if (visible) {
        setTimeout(() => {
          window.removeEventListener('mouseup', this.removeUp, false)
          contain = document.getElementsByClassName(this.simpleClass)[0]
          header = contain.getElementsByClassName('ant-modal-header')[0]
          modalContent = contain.getElementsByClassName('ant-modal-content')[0]

          modalContent.style.left = 0
          modalContent.style.transform = 'translate(0px,0px)'

          console.log('初始化-header:', header)
          console.log('初始化-contain:', contain)
          console.log('初始化-modalContent:', modalContent)

          header.style.cursor = 'all-s `croll'

          contain.onmousedown = (e) => {
            mouseDownX = e.pageX
            mouseDownY = e.pageY
            document.body.onselectstart = () => false
            window.addEventListener('mousemove', this.handleMove, false)
          }

          window.addEventListener('mouseup', this.removeUp, false)
        }, 0)
      }
    },
    removeMove() {
      window.removeEventListener('mousemove', this.handleMove, false)
    },
    removeUp(e) {
      document.body.onselectstart = () => true

      if (!(e.pageX == mouseDownX && e.pageY == mouseDownY)) {
        sumX = sumX + deltaX
        sumY = sumY + deltaY
      }

      this.removeMove()
    },
  },
}
</script>

<style lang='less' scoped>
</style>

index.js

import globalModal from "./globalModal.vue"

export const GlobalModal = {
  install: function (Vue) {
    Vue.component("GlobalModal", globalModal)
  }
}

2、使用:

<global-modal
      class="modal-box"
      title="XX"
      v-if="enameVisible"
      :visible="enameVisible"
      width="40%"
      @cancel="oncancel"
      @ok="handleEnameOk()"
    >
     <template slot="modalBody">
      <!--弹窗主体信息 -->
     </template>
    </global-modal>

以上是弹窗拖拽的功能,计算方法主要是参照有博主分享的react的ant-design封装的antd-draggable-modal组件:

参考的源码:https://github.com/astonishqft/antd-draggable-modal/blob/master/src/index.tsx