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

问题描述

我在一个页面上创建了两个模态，但是在如何使它运行方面存在问题。我只是复制了示例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.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.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 -->

解决方法

这里的解决方案是使每个模式成为一个单独的组件，并向其分配自定义事件以打开/关闭它们。这样，它们将是分开的，您将能够独立关闭它们。如果一次只能打开一个模态，则应添加 @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一样工作。

alpine.js javascript