?實現拖拽功能，主要有以下幾個步驟：

1. 鼠標點擊時獲取鼠標的坐標，并開始監聽鼠標的移動和鼠標的松開動作

2. 鼠標移動時獲取當前坐標，并計算相對于鼠標點擊時坐標的偏移值，并修改彈窗的偏移量

3. 鼠標松開時停止所有監聽，并保存彈窗當前的位置

直接上代碼：

<template><a-modalv-model:visible="modelVisible":style="style"><template #title><-- 此處我只在彈窗的title部分添加了拖拽功能--><div style="padding: 16px 24px" @mousedown="mouseDown" @mouseup="mouseUp"><slot name="title"></slot></div></template><template #footer><slot name="footer"></slot></template><slot></slot></a-modal> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({data () {return {modelVisible: false,style: null,initX: null,initY: null,left: 0, //移動時相對于鼠標點擊時坐標的偏移位置top: 0,lastleft: 0, // 每次拖拽后彈窗的位置lasttop: 0}},methods: {mouseDown (e) {this.initX = e.clientX;this.initY = e.clientY;document.addEventListener("mousemove", this.mouseMove, false)document.addEventListener("mouseup", this.mouseUp, false)},mouseUp () {//拖拽后彈窗最后一次所在位置為前一次拖拽最后的位置加上這次拖拽的偏移量this.lastleft = this.lastleft + this.left; this.lasttop = this.lasttop + this.top;this.style = "left:" + this.lastleft + "px;margin-top: " + this.lasttop + "px"document.removeEventListener("mousemove", this.mouseMove, false)document.removeEventListener("mouseup", this.mouseUp, false)this.initX = null;this.initY = null;},mouseMove (e) {this.left = (e.clientX - this.initX);this.top = (e.clientY - this.initY)this.style = "left:" + this.lastleft + "px;margin-top: " + this.lasttop + "px" + ";transform:translate(" + this.left + "px," + this.top + "px)"},} }) </script> <style lang="scss"> .ant-modal-header {padding: 0; } </style>

此代碼是基于vue3寫的。

總結

以上是生活随笔為你收集整理的ant-desgin vue 弹窗拖拽功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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