1、html部分?

<div v-dialogDrag id="modalBox"><a-modalv-model:visible="visible"title="我要拖拽":getContainer="getContainer":force-render="true" // 強制渲染 不管有沒有開啟modal 頁面都進行DOM加載><p>Some contents...</p></a-modal></div>

2、ts部分

說明：modal默認掛載到body下，getContainer? 函數是為了讓modal掛載到父盒子modalBox下，不然指令中 el 獲取不到modal的DOM節點

const visible = ref<boolean>(false); const getContainer = () => {return document.getElementById("modalBox"); };

3、指令代碼部分

本人文件層級

3.1 index.ts文件

import dialogDrag from "./modules/dialogDrag" // 統一入口 export default function directive(app: any) {app.directive('dialogDrag', dialogDrag) }

3.2 dialogDrag.ts (核心代碼)

說明：必須使用 nextTick 不然獲取DOM元素會為空

import { nextTick } from "vue"; export default {mounted(el: any, binding?: any) {nextTick(() => {// 獲取對應DOMconst dialogHeaderEl = el.querySelector('.xz-modal-header') // 類名一定要替換成自己的 我本地改了前綴const dragDom = el.querySelector('.xz-modal') // 類名一定要替換成自己的 我本地改了前綴dialogHeaderEl.style.cssText += ';cursor:move;'// dragDom.style.cssText += ';bottom:0px;'// 獲取原有屬性 火狐谷歌 window.getComputedStyle(dom元素, null);const sty = (function () {return (dom: any, attr: any) => getComputedStyle(dom, null)[attr]})()dialogHeaderEl.onmousedown = (e: any) => {// 鼠標按下，計算當前元素距離可視區的距離const disX = e.clientX - dialogHeaderEl.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTopconst screenWidth = document.body.clientWidth // body當前寬度const screenHeight = document.documentElement.clientHeight // 可見區域高度(應為body高度，可某些環境下無法獲取)const dragDomWidth = dragDom.offsetWidth // 對話框寬度const dragDomheight = dragDom.offsetHeight // 對話框高度const minDragDomLeft = dragDom.offsetLeftconst maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidthconst minDragDomTop = dragDom.offsetTopconst maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight// 獲取到的值帶px 正則匹配替換let styL: any = sty(dragDom, 'left')// 為兼容ieif (styL === 'auto') styL = '0px'let styT: any = sty(dragDom, 'top')// console.log(styL)// 注意在ie中 第一次獲取到的值為組件自帶50% 移動之后賦值為pxif (styL.includes('%')) {styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)} else {styL = +styL.replace(/px/g, '')styT = +styT.replace(/px/g, '')}document.onmousemove = function (e) {// 通過事件委托，計算移動的距離let left = e.clientX - disXlet top = e.clientY - disY// 邊界處理if (-(left) > minDragDomLeft) {left = -(minDragDomLeft)} else if (left > maxDragDomLeft) {left = maxDragDomLeft}if (-(top) > minDragDomTop) {top = -(minDragDomTop)} else if (top > maxDragDomTop) {top = maxDragDomTop}// 移動當前元素dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`}document.onmouseup = function (e: any) {document.onmousemove = nulldocument.onmouseup = null}return false}})} }

main.ts中引入 全局使用

const app = createApp(App); import App from "./App.vue"; import directive from './common/Directive/index'; // 統一自定義指令入口 directive(app)

優化版本?增加了左右和底部拖拽控制彈窗大小功能

Vue3 + Ant Design Vue Modal 對話框拖拽+縮放指令_無恙??????的博客-CSDN博客

總結

以上是生活随笔為你收集整理的Vue3 + Ant Design Vue Modal 对话框可拖拽指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。