使Bootstrap-Vue模式可拖动

Question

我在一个项目中使用bootstrap-vue modals，不希望它们是可拖拽的。

我在谷歌上搜索过了，但我对new开发还是相当陌生的，所以我对没有vue的bootstrap的解决方案感到有点不知所措。

我认为示例代码不是必需的，因为我使用的是标准的bootstrap-vue模态。如果我说错了请告诉我。

您能提供一些bootsrap-vue的示例或解释如何使用仅引导解决方案吗？

谢谢

Answer 1

BootstrapVue <b-modal>使用Bootstrap v4.x CSS/SCSS样式来定位模态。

样式设置使用视口的绝对定位，并使用自动左/右页边距水平居中放置模式，使用顶部页边距从页面顶部向下部分定位模式。

因此，不幸的是，在框外，您不能在视口中绝对定位它们。

您需要将模式对话框子容器的位置更改为绝对位置，并基于拖动控制左侧/顶部位置。这不是一项过于简单的任务。您需要创建自己的header (使用header的范围槽)，并为单击/拖动添加事件侦听器，如果拖动，则将.modal-dialog容器的位置切换为绝对位置，然后计算左/顶部坐标并对该元素使用传统的DOM样式调整。