vue el-dialog实现可拖拉

el-dialog实现拖拉,每次点击度居中显示,以下贴出代码具体实现,我是可以正常拖拉并且每次度显示在中间,效果还可以,需要的可以丢上去跑跑

组件部分:

复制代码
<el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        custom-class="draggable-dialog"
        ref="dialog"
        @open="onDialogOpen"
        @opened="onDialogOpened"
        @close="onDialogClose"
        width="646px">
      <div slot="title" class="header" @mousedown="startDrag">
        <span>公式设置</span>
      </div>
        <el-divider></el-divider>
        <div >
            这里写你的dialog业务代码
        </div>

</el-dialog>

定义变量:

函数部分:

复制代码
startDrag(event) {
      event.preventDefault();
      this.dragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;

      const dialogRef = this.$refs.dialog.$el;
      if (!dialogRef) {
        console.error('无法找到对话框引用');
        return;
      }
      console.log('获取打开后的位置dialogRef-->',dialogRef);
      console.log('获取打开后的位置dialogRef.style.left-->',dialogRef.style.left);
      console.log('获取打开后的位置dialogRef.style.top-->',dialogRef.style.left);
      // 获取当前对话框的位置
      const style = window.getComputedStyle(dialogRef);
      this.currentX = parseFloat(style.left || '0');
      this.currentY = parseFloat(style.top || '0');
      console.log('this.currentX---------->',this.currentX);
      console.log('this.currentY---------->',this.currentY);
      
      document.onmousemove = this.doDrag.bind(this);
      document.onmouseup = this.stopDrag.bind(this);
    },
    doDrag(event) {
      if (!this.dragging) return;

      const deltaX = event.clientX - this.startX;
      const deltaY = event.clientY - this.startY;

      // 更新当前位置
      this.currentX += deltaX;
      this.currentY += deltaY;

      // 更新起始点
      this.startX = event.clientX;
      this.startY = event.clientY;

      const dialogRef = this.$refs.dialog.$el;
      if (dialogRef) {
        dialogRef.style.left = `${this.currentX}px`;
        dialogRef.style.top = `${this.currentY}px`;

        event.preventDefault();
      }
    },
    stopDrag() {
      this.dragging = false;
      document.onmousemove = null;
      document.onmouseup = null;
    },
    onDialogOpen() {
      // 对话框即将打开时,重置位置数据
      this.currentX = 0;
      this.currentY = 0;
    },
    onDialogOpened() {
        
    },
    onDialogClose() {
    
      // 对话框关闭时,取消所有事件监听器
      document.onmousemove = null;
      document.onmouseup = null;
      const dialogRef = this.$refs.dialog.$el;
      dialogRef.style.left= 0;
      dialogRef.style.top = 0;
    },

CSS部分:

复制代码
<style scoped>

/**以下是dialog */
.draggable-dialog {
  position: fixed !important; /* �保对话框是固定定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
  overflow: auto; /* �保对话框内部可以滚动 */
  /*width: 600px;  �定宽度 */
 /* height: 900px; /* �定高度 */
}
.header {
  cursor: move;
}
</style>
相关推荐
棉花糖超人5 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
daols887 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇7 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊7 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习8 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖8 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐9 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html