vue el-dialog实现可拖沓

el-dialog实现拖沓，每次点击度居中显示，以下贴出代码具体实现，我是可以正常拖沓并且每次度显示在中心，效果还可以，需要的可以丢上去跑跑
组件部分： 

1. <el-dialog
2.         :visible.sync="dialogVisible"
3.         :close-on-click-modal="false"
4.         custom-class="draggable-dialog"
5.         ref="dialog"
6.         @open="onDialogOpen"
7.         @opened="onDialogOpened"
8.         @close="onDialogClose"
9.         width="646px">
10.       <div slot="title" class="header" @mousedown="startDrag">
11.         <span>公式设置</span>
12.       </div>
13.         <el-divider></el-divider>
14.         <div >
15.             这里写你的dialog业务代码
16.         </div>
18. </el-dialog>

复制代码

定义变量：

函数部分：

1. startDrag(event) {
2.       event.preventDefault();
3.       this.dragging = true;
4.       this.startX = event.clientX;
5.       this.startY = event.clientY;
7.       const dialogRef = this.$refs.dialog.$el;
8.       if (!dialogRef) {
9.         console.error('无法找到对话框引用');
10.         return;
11.       }
12.       console.log('获取打开后的位置dialogRef-->',dialogRef);
13.       console.log('获取打开后的位置dialogRef.style.left-->',dialogRef.style.left);
14.       console.log('获取打开后的位置dialogRef.style.top-->',dialogRef.style.left);
15.       // 获取当前对话框的位置
16.       const style = window.getComputedStyle(dialogRef);
17.       this.currentX = parseFloat(style.left || '0');
18.       this.currentY = parseFloat(style.top || '0');
19.       console.log('this.currentX---------->',this.currentX);
20.       console.log('this.currentY---------->',this.currentY);
21.       
22.       document.onmousemove = this.doDrag.bind(this);
23.       document.onmouseup = this.stopDrag.bind(this);
24.     },
25.     doDrag(event) {
26.       if (!this.dragging) return;
28.       const deltaX = event.clientX - this.startX;
29.       const deltaY = event.clientY - this.startY;
31.       // 更新当前位置
32.       this.currentX += deltaX;
33.       this.currentY += deltaY;
35.       // 更新起始点
36.       this.startX = event.clientX;
37.       this.startY = event.clientY;
39.       const dialogRef = this.$refs.dialog.$el;
40.       if (dialogRef) {
41.         dialogRef.style.left = `${this.currentX}px`;
42.         dialogRef.style.top = `${this.currentY}px`;
44.         event.preventDefault();
45.       }
46.     },
47.     stopDrag() {
48.       this.dragging = false;
49.       document.onmousemove = null;
50.       document.onmouseup = null;
51.     },
52.     onDialogOpen() {
53.       // 对话框即将打开时，重置位置数据
54.       this.currentX = 0;
55.       this.currentY = 0;
56.     },
57.     onDialogOpened() {
58.         
59.     },
60.     onDialogClose() {
61.    
62.       // 对话框关闭时，取消所有事件监听器
63.       document.onmousemove = null;
64.       document.onmouseup = null;
65.       const dialogRef = this.$refs.dialog.$el;
66.       dialogRef.style.left= 0;
67.       dialogRef.style.top = 0;
68.     },

复制代码

CSS部分：

1. <style scoped>
3. /**以下是dialog */
4. .draggable-dialog {
5.   position: fixed !important; /* �保对话框是固定定位 */
6.   top: 50%;
7.   left: 50%;
8.   transform: translate(-50%, -50%);
9.   transition: all .3s ease;
10.   overflow: auto; /* �保对话框内部可以滚动 */
11.   /*width: 600px;  �定宽度 */
12. /* height: 900px; /* �定高度 */
13. }
14. .header {
15.   cursor: move;
16. }
17. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。