elementPlus dialog组件设置可拖动,当内容高度大于视口高度拖动显示异常的解决办法

这篇具有很好参考价值的文章主要介绍了elementPlus dialog组件设置可拖动,当内容高度大于视口高度拖动显示异常的解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

elementPlus UI的dialog弹框组件在设置了draggable属性后就可拖动弹框,但是当弹框的内容高度大于视口高度时去拖动弹框就会出现显示问题。

解决办法(修改源码)

去node_modules下面找到element-plus文件夹,按照以下路径修改onMousemove函数,
elementPlus dialog组件设置可拖动,当内容高度大于视口高度拖动显示异常的解决办法,javascript,前端框架vue,elementPlus,dialog,拖动显示异常
如下:
elementPlus dialog组件设置可拖动,当内容高度大于视口高度拖动显示异常的解决办法,javascript,前端框架vue,elementPlus,dialog,拖动显示异常

const moveX = clientWidth > targetWidth ? Math.min(Math.max(offsetX + e2.clientX - downX, minLeft), maxLeft) : Math.max(Math.max(offsetX + e2.clientX - downX, minLeft), maxLeft);
const moveY = clientHeight > targetHeight ? Math.min(Math.max(offsetY + e2.clientY - downY, minTop), maxTop) : Math.max(Math.max(offsetY + e2.clientY - downY, minTop), maxTop) ;

保存之后删除node_modules->.vite文件夹下的deps文件夹,然后重新编译即可解决。文章来源地址https://www.toymoban.com/news/detail-611326.html

到了这里,关于elementPlus dialog组件设置可拖动,当内容高度大于视口高度拖动显示异常的解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何动态设置vue组件的宽度和高度?

    在组件最外层加上div 给div加上属性:style=“{ height: toggleHeight ? toggleHeight : ‘2000px’, width: toggleWidth ? toggleWidth : ‘1188px’ }” 使用js修改toggleHeight 和 toggleWidth 的值 实现动态修改宽高 例 在父组件中动态修改子组件的宽度 auditInformation子组件中 index父组件中

    2024年02月12日
    浏览(41)
  • 解决问题:Element ui组件中Dialog对话框只显示遮罩层,不显示弹框内容

    以下是Dialog 对话框的基本用法: 这个时候页面只显示了遮罩层,但是不显示弹框的内容,查阅文档后,发现有这样一条: append-to-body的默认值是false,所以需要自己在el-dialog标签中手动设置为true,  加上之后弹框内容就可以显示了。

    2024年02月06日
    浏览(58)
  • Dialog中webView限制高度

            自定义弹框时,弹框中需要webView加载内容,如果webView内容很长,弹框会撑满页面,现在不想让弹框撑满,而是可以自己限制弹框最高高度,内容长度没有达到最高高度时,弹框高度根据内容自适应,内容长度超过最高高度时,弹框高度限制在最高高度,这样就不

    2024年02月11日
    浏览(27)
  • vue vue-element-ui组件 el-menu高度设置

    水平展示: 外面包个div,再设置属性: 代码示例: 效果:

    2024年02月11日
    浏览(53)
  • el-dialog固定高度

    el-dialog默认高度是自由拉伸的,当内容超过屏幕时会出现滚动条,按钮和标题都会随着滚动,用户体验不好。 如下图 现在要实现一种窗口高度固定,内容滚动的方式,如下直接在内容上套一层div并加上自定义样式el-dialog-div 效果如下

    2024年02月12日
    浏览(37)
  • element ui dialog可拉伸放大缩小和拖动

    鼠标放到对话框头部可以拖动对话框、双击头部可以放大对话框 鼠标放到对话框左右两侧可以拖动对话框宽度、放到下边可以拖动对话框高度、放到右下角高度宽度可以同时缩放 或者单独写一个js将Vue.directive(\\\'dialogDrag\\\', { ………… } )中的代码放入其中如:     这样就可以,

    2024年02月15日
    浏览(40)
  • 流畅交互体验:实现Vue中el-dialog拖动效果的完美指南

            在使用elementUI中的Dialog组件时,总有无理的产品提需求,在右上角增加可点击全屏的功能、给我实现弹出框可任意拖拽的功能......这种情况下,组件就不能很好的使用了,那么,只能由我们前端攻城狮进行代码攻克了,接下来就实现其中的可拖拽功能        

    2024年02月12日
    浏览(45)
  • vue/Element UI 实现Element UI el-dialog 自由拖动

    前言: 最近有个项目,客户要求弹窗可拖动,但是由于elemen ui本身的弹窗并没有拖动的属性,无法满足客户的需求。 于是我百度找到了几篇文章,终于可以实现客户的需求! 请往下看↓↓ 一、新建一个目录:utils 二、创建drag .js文件 三、创建directive.js 文件 四、main.js文件中

    2024年02月02日
    浏览(67)
  • Element UI Dialog 对话框改成固定高度,超出部分滚动条滚动

    elememt ui 中的el-dialog对话框如果 内容过多高度会被无限拉长 。要将其设置成固定高度,此处我设置的是 页面总高度的70% ,内容过多时在对话框内出现 滚动条 。但是这样设置会造成高度不能根据内容自适应,始终是70%。可以有两种方法实现: 方法二 : 主要是运用element ui 中

    2024年02月12日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包