标签：模态 el vue const top ant header modal left

学习笔记----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上面加v-drag-modal就好了

• <a-modal
        v-drag-modal
        :visible="true"
        :centered="true"
        :destroyOnClose="true"
        :maskClosable="false"
        title="新建文件夹"
        :width="1200"
      >
     ....内容....
  </a-modal>
  

标签：模态,el,vue,const,top,ant,header,modal,left
来源： https://www.cnblogs.com/ke210/p/16418553.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。