学习笔记----ant_vue模态框拖拽

通过自定义命令

  • utils文件夹中新建dragModal.js

  • import Vue from 'vue'
    
    // 注册自定义拖拽指令,弥补 modal 组件不能拖动的缺陷
    Vue.directive('drag-modal', (el, bindings, vnode) => {
      Vue.nextTick(() => {
        const { visible, destroyOnClose } = vnode.componentInstance
        // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁,指令被重复调用
        if (!visible) return
        //找到模态框的dom
        const modal = el.getElementsByClassName('ant-modal')[0]
        //找到模态框的dom 头部  这个有可能会不一样 自己找一下就好了
        const header = el.getElementsByClassName('modal-header')[0]
        let left = 0
        let top = 0
    
        // 鼠标变成可移动的指示
        header.style.cursor = 'move'
    
        // 未定义 destroyOnClose 时,dom未被销毁,关闭弹窗再次打开,弹窗会停留在上一次拖动的位置
        if (!destroyOnClose) {
          left = modal.left || 0
          top = modal.top || 0
        }
        // top 初始值为 offsetTop
        top = top || modal.offsetTop
        header.onmousedown = e => {
          const startX = e.clientX
          const startY = e.clientY
          header.left = header.offsetLeft
          header.top = header.offsetTop
          el.onmousemove = event => {
            const endX = event.clientX
            const endY = event.clientY
            modal.left = header.left + (endX - startX) + left
            modal.top = header.top + (endY - startY) + top
            modal.style.left = modal.left + 'px'
            modal.style.top = modal.top + 'px'
          }
          el.onmouseup = event => {
            left = modal.left
            top = modal.top
            el.onmousemove = null
            el.onmouseup = null
            header.releaseCapture && header.releaseCapture()
          }
          header.setCapture && header.setCapture()
        }
      })
    })
    
  • 在main.js 或者main.ts中引入,全局自定义命令 import './utils/dragModal.js'

  • 使用的话直接在 a-model上面加就好了

  • <a-modal
          v-drag-modal   // 自定义命令
          :visible="true"   //是否显示 自己加变量就好了
          :centered="true"
          :destroyOnClose="true"   //关闭及销毁 
          :maskClosable="false" 
          title="新建文件夹"
          :width="1200"
        >
       ....内容....
    </a-modal>
    //其他的什么属性看文档吧 ant vue
    
Logo

前往低代码交流专区

更多推荐