欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > vue el-dialog实现可拖拉

vue el-dialog实现可拖拉

2025/5/9 11:18:16 来源:https://blog.csdn.net/zgwcyl/article/details/144540803  浏览:    关键词: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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词