iView Modal對話框 設置可拖動(dragable)時,一拖就消失


現象:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM