网站服务商,新闻类wordpress模板,西安建站模板厂家,网站建设公司介绍el-dialog实现拖拉#xff0c;每次点击度居中显示#xff0c;以下贴出代码具体实现#xff0c;我是可以正常拖拉并且每次度显示在中间#xff0c;效果还可以#xff0c;需要的可以丢上去跑跑
组件部分#xff1a;
el-dialog:visible.syncdialogVisible每次点击度居中显示以下贴出代码具体实现我是可以正常拖拉并且每次度显示在中间效果还可以需要的可以丢上去跑跑
组件部分
el-dialog:visible.syncdialogVisible:close-on-click-modalfalsecustom-classdraggable-dialogrefdialogopenonDialogOpenopenedonDialogOpenedcloseonDialogClosewidth646pxdiv slottitle classheader mousedownstartDragspan公式设置/span/divel-divider/el-dividerdiv 这里写你的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
