如何使用vue js使模态从一端移动到另一端

Posted 2023-05-08

【中文标题】如何使用vue js使模态从一端移动到另一端

【英文标题】：how to make modal movable from one end to other end using vue js

【发布时间】：2020-06-04 09:55:02

【问题描述】：

在 vue.js 中有这样的代码，我的议程是让模态从一端移动到另一端，这是我的代码，为此目的使用了引导模态并包括：可拖动

<b-modal ref="my-modal" hide-footer title="Edit Record">
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <div class="">Viz Attributes</div>
        </div>

        <div class="card-body">
        </div>
    </div>
</b-modal>

【问题讨论】：

看看***.com/a/12592150/12057794

这是使用 jquery，需要在 vue.js 中，或者只使用纯引导

【参考方案1】：

您不能将它们绝对定位在视口中。

您需要将模态对话框子容器的定位更改为绝对位置，并根据拖动控制左/上位置。这不是一件容易的事。您需要创建自己的可拖动模式。 我建议你使用 Vue.js modal 组件 DEMO：www.vue-js-modal.yev.io 安装：www.npmjs.com/package/vue-js-modal

<modal name="bar" draggable=".window-header">
  <div class="window-header">DRAG ME HERE</div>
  <div>
     Hello!
  </div>
</modal>

可拖动属性不仅可以接受布尔参数，还可以接受字符串参数。

【讨论】：

如果我点击“在这里拖动我”，拖动不会发生？

你安装了“Vue.js modal”的组件了吗？？