javascript - vuejs 中未触发事件

Question

我的模态有一个叠加层。当有人点击叠加层时，模式应该被切换。在我的 mounted() 方法中，我有以下代码:

const overlay = document.querySelector(".modal-overlay");

overlay.addEventListener("click", this.toggleModal);

var closemodal = document.querySelectorAll(".modal-close");
for (var i = 0; i < closemodal.length; i++) {
  closemodal[i].addEventListener("click", this.toggleModal);
}

我已经添加了下面的模板

   <template> <divclass="modal pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div ref="overlay" class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50 z-50"></div>

<div
  class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"
>
  <div
    class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50"
  >
    <svg
      class="fill-current text-white"
      xmlns="http://www.w3.org/2000/svg"
      width="18"
      height="18"
      viewBox="0 0 18 18"
    >
      <path
        d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
      />
    </svg>
    <span class="text-sm">(Esc)</span>
  </div>

  <!-- Add margin if you want to see some of the overlay behind the modal-->
  <div class="modal-content py-4 text-left px-6">
    <!--Title-->
    <div class="flex justify-between items-center pb-3">
      <p class="text-2xl font-bold">Bedankt</p>
      <div class="modal-close cursor-pointer z-50">
        <svg
          class="fill-current text-black"
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 18 18"
        >
          <path
            d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
          />
        </svg>
      </div>
    </div>

    <!--Body-->
    <p>Je email adres is toegevoegd aan onze mailing list. We houden je op de hoogte van de laatste ontwikkelingen</p>
    <p>Tevens hebben we je op de beta lijst gezet en je zult als een van de eersten een uitnodiging van ons ontvangen om het platform te testen</p>
    <!--Footer-->
    <div class="flex justify-end pt-2">
      <button
        @click="toggleModal"
        class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400"
      >Close</button>
    </div>
  </div>
</div>

我使用 console.log() 确保添加了 click 事件。但是，当我单击模式时，什么也没有发生。我尝试执行 console.log() 但没有成功。

有什么建议吗？

Answer 1

您可以将点击监听器添加到 Vue 中的任何内容中。这就是它的魔力。它可以是一个 div、一个 span、一个图像。只需将@click 添加到您的overlay div 中，它就应该可以工作。

<div ref="overlay" @click="toggleModal"></div>