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>
相关推荐
华科云商xiao徐3 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价4 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花4 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb10135 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树6 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜7 分钟前
跨平台UI自动化-Appium
前端
海底火旺7 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
不要进入那温驯的良夜8 分钟前
浏览器技术原理
前端
在泡泡里8 分钟前
前端 mcp 的使用
前端
爱学习的茄子10 分钟前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试