antdv框架modal彈窗元件實現拖拽功能
阿新 • • 發佈:2022-05-19
在ant-design-vue(v.1.6.2)框架中,modal元件預設情況下彈窗是固定在頁面上且不可移動的,根據現有需求,新增彈窗可拖拽移動的功能。
自定義指令v-drag-modal
新建dragModal.js
,編寫vue的自定義指令。
import Vue from 'vue' // 註冊自定義拖拽指令,彌補 modal 元件不能拖動的缺陷 Vue.directive('drag-modal', (el, bindings, vnode) => { Vue.nextTick(() => { const { visible, destroyOnClose } = vnode.componentInstance // 防止未定義 destroyOnClose 關閉彈窗時dom未被銷燬,指令被重複呼叫 if (!visible) return const modal = el.getElementsByClassName('ant-modal')[0] const header = el.getElementsByClassName('ant-modal-header')[0] let left = 0 let top = 0 // 設定遮罩層可滾動 setTimeout(() => { document.body.style.width = '100%' document.body.style.overflowY = 'inherit' }, 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.js
中引入上面定義的指令
import './directives/dragModal'
Modal元件使用指令
在Modal元件上使用v-drag-modal
指令
<a-modal
title="還款計劃明細"
v-model="dialogVisible"
v-drag-modal
destroyOnClose
:mask="false"
:maskClosable="false"
>
...
</a-modal>
頁面效果
彈窗遮罩層為透明,彈窗可拖拽移動,且網頁背景可上下滾動。
如有錯誤,請多指教,謝謝!