現象:
當給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),所以就會出現對話框跑偏了(甚至跑出屏外看不到)。