zoukankan      html  css  js  c++  java
  • 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),所以就会出现对话框跑偏了(甚至跑出屏外看不到)。

    喜欢的话,请点赞,转发、收藏、评论,谢谢!
  • 相关阅读:
    Spring之Condition(二)在哪里解析的
    SpringBoot启动跟代码过程
    Spring之Condition(一)
    Kafka之 vm.max_map_count
    Redis常见面试题
    Redis为什么快
    TCP一个包多大
    场景问题
    这是一个测试
    小程序-使用django-drf开接口的步骤
  • 原文地址:https://www.cnblogs.com/johnjackson/p/14918018.html
Copyright © 2011-2022 走看看