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

标签：一个   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