时间戳

首页 > 解决方案 > 使 Bootstrap-Vue 模态可拖动

javascript - 使 Bootstrap-Vue 模态可拖动

问题描述

我在项目中使用 bootstrap-vue 模态并且不希望它们可拖动。

我用谷歌搜索了这个，但我对 web 开发还很陌生，所以我对没有 vue 的引导程序的解决方案有点不知所措。

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

您能否提供一些 bootsrap-vue 的示例或解释如何使用 bootstrap-only 解决方案？

谢谢

标签： javascriptvue.jswebbootstrap-modalbootstrap-vue

解决方案

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

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

所以不幸的是，开箱即用，您不能将它们绝对定位在视口中。

您需要将模态对话框子容器的定位更改为绝对位置，并根据拖动控制左/上位置。这不是一件容易的事。您需要创建自己的标题（使用标题的作用域插槽），并为单击/拖动添加事件侦听器，如果拖动，则将.modal-dialog容器的位置切换为绝对位置，然后计算左/上坐标并使用对该元素的传统 DOM 样式调整。

推荐阅读