码迷,mamicode.com
首页 > 其他好文 > 详细

iView Modal对话框 设置可拖动(dragable)时,一拖就消失

时间:2021-06-22 18:23:59      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:一个   pos   com   isp   中间   https   modal   原因   组件   

现象:

当给Modal组件添加 draggable 属性将对话框设为可拖动时,当拖动对话框时,对话框就消失(或者跑偏了)。

原因:

因为Modal组件使用了“自定义位置”的垂直居中,参考官方文档 https://www.iviewui.com/components/modal#ZDYWZ

结论:

draggable的原理也是通过修改对话框的位置CSS实现的,当拖动时相对于.ivu-modal修改.ivu-modal-content的top和left的值,而上面官方的自定义样式的例子中垂直居中用了flex部局,而之前没有加拖动属性时ivu-modal-content的positon是relative,加了draggable后,.ivu-modal-content元素上加了一个class: ivu-modal-content-drag, 导致ivu-modal的高度和宽度变成了0,按flex部局的效果,它就跑到了屏幕正中间。而正常拖动窗口时计算的top,left应该是按屏幕左上角得到的(因为iview会在拖动时将.ivu-modal的top值改为0,宽度变为auto),所以就会出现对话框跑偏了(甚至跑出屏外看不到)。

iView Modal对话框 设置可拖动(dragable)时,一拖就消失

标签:一个   pos   com   isp   中间   https   modal   原因   组件   

原文地址:https://www.cnblogs.com/johnjackson/p/14918018.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!