使用 Alpine.js 在单个页面上创建两个模式

Question

我在单个页面上创建了两个模态框，但我对如何使其工作有疑问。我只是复制了示例 here 并将其转换为如下函数：

function isDialogOpen() {
    return {
        modal: false,
        open() { this.modal = true;document.body.classList.add("modal-open"); },
        close() { this.modal = false;document.body.classList.remove("modal-open"); },
        isOpen() { return this.modal === true },
    }
}

这两个模态框包裹在 <main> 元素中。

<main class="assignedquestion"  x-data="isDialogOpen()" @keydown.escape="close">

我试过这样做：

<main class="assignedquestion"  x-data="...isDialogOpen(), ...reassignDialog()" @keydown.escape="close">

并创建另一个具有不同变量和函数的函数。

function reassignDialog() {
    return {
        reassignmodal: false,
        openReassign() { this.reassignmodal = true;document.body.classList.add("modal-open"); },
        closeReassign() { this.reassignmodal= false;document.body.classList.remove("modal-open"); },
        isOpenReassign() { return this.reassignmodal=== true },
    }
}

很遗憾，它不起作用。只有第一个模态出现。
这些模式将由 2 个不同的按钮触发。

下面是我的模态框的标记：

第一个模态

<!-- overlay -->
<div
    class="overflow-auto"
    style="background-color: rgba(0, 0, 0, 0.75);display:none"
    x-show="isOpen()"
    :class="{ 'user-history-modal': isOpen() }"
>
  <!-- dialog -->
  <div
       class="bg-white shadow-2xl"
       x-show="isOpen()"
       @click.away="close"
  >
      <div class="modal-header">
         <h3>Reassign Ticket</h3>
          <button type="button" @click="close"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L1 13M1 1l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      </div>
      <div class="modal-content">
        
      </div>
  </div><!-- /dialog -->
</div><!-- /overlay -->

第二情态

<!-- overlay reassignDialog -->
<div
    class="overflow-auto"
    style="background-color: rgba(0, 0, 0, 0.75);display:none"
    x-show="isOpenReassign()"
    :class="{ 'reassign-history-modal': isOpenReassign() }"
>
  <!-- dialog -->
  <div
       class="bg-white shadow-2xl"
       x-show="isOpenReassign()"
       @click.away="closeReassign"
  >
      <div class="modal-header">
         <h3>Reassign Ticket</h3>
          <button type="button" @click="closeReassign"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L1 13M1 1l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      </div>
      <div class="modal-content">
        
      </div>
  </div><!-- /dialog -->
</div><!-- /overlay -->

Answer 1

这里的解决方案是让每个模式成为一个单独的组件，并将自定义事件分派给它们 open/close 它们。这样，它们就会分开，您就可以独立关闭它们。如果一次只能打开一个模式，则应添加 @toggle-reassign-modal.window="close()" 到对话框模态（第一个模态）和 @toggle-modal.window="close()" 到重新分配模态（第二个模态），以便在打开另一个模态时它们总是关闭。

<div
  x-data="isDialogOpen()"
  @toggle-modal.window="modal = !modal"
  x-init="$watch('modal', (val) => { if (val) document.body.classList.add('modal-open') } )"
>
  <!-- contents of modal as per the question -->
</div>


<div
  x-data="reassignDialog()"
  @toggle-reassign-modal.window="reassignmodal = !reassignmodal"
  x-init="$watch('reassignmodal', (val) => { if (val) document.body.classList.add('modal-open') } )"
>
  <!-- contents of reassign modal as per the question -->
</div>

要触发模式打开，您可以使用以下命令：

<!-- can remove x-data if these are inside of an Alpine component -->
<button x-data @click="$dispatch('toggle-modal')">Toggle Modal</button>
<button x-data @click="$dispatch('toggle-reassign-modal')">Toggle Reassign Modal</button>

您可以看到它作为 Codepen 工作。

Answer 2

模态框（以及其他组件）现在是官方 AlpineJS documentation 的一部分。使用它们以获得完美的开箱即用模式！

使用 Alpine.js 在单个页面上创建两个模式

Creating two modals on a single page using Alpine.js

javascript

alpine.js