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

Question

在 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>

Answer 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>

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