Vue3 实现模态框组件网站首页 技术杂谈

Vue3 实现模态框组件

忧郁的蛋~ 2024-06-17 10:47:03

简介Vue3 实现模态框组件

基于 Vue 3 实现模态框，并且单击遮罩层可关闭模态框

下面是一个基于 Vue 3 实现的模态框，并且点击遮罩层可关闭模态框的示例代码：

<template>
  <div class="modal-wrapper" v-show="visible" @click.self="closeModal">
    <div class="modal">
      <div class="header">
        <h2>{{ title }}</h2>
        <button @click="closeModal">X</button>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  import { ref } from "vue";

  export default {
    name: "Modal",
    props: {
      title: {
        type: String,
        required: true,
      },
    },
    setup(props, { emit }) {
      const visible = ref(false);

      const openModal = () => {
        visible.value = true;
      };

      const closeModal = () => {
        visible.value = false;
        emit("close");
      };

      return {
        visible,
        openModal,
        closeModal,
      };
    },
  };
</script>

<style scoped>
  .modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .modal {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .header h2 {
    margin: 0;
  }

  .header button {
    border: none;
    background-color: transparent;
    font-size: 20px;
    cursor: pointer;
  }

  .content {
    max-height: 400px;
    overflow: auto;
  }
</style>

在这个示例中，定义了一个名为 Modal 的组件，并且通过 props 属性接收了一个 title 属性，表示模态框的标题。在 setup 函数中，使用 ref 函数创建了一个名为 visible 的响应式数据，表示模态框是否可见。还定义了 openModal 和 closeModal 函数，分别用于打开和关闭模态框，并且通过 emit 函数触发了一个 close 事件，以便在模态框关闭时可以执行其他操作。

在模板中，使用 v-show 指令根据 visible 的值来控制模态框的显示和隐藏。还在外层包裹了一个 div 元素，并且使用了 @click.self 修饰符来监听单击遮罩层的事件，并且调用了 closeModal 函数来关闭模态框。在模态框内部，使用了插槽来动态渲染模态框的内容，并且在头部添加了一个关闭按钮，以便用户手动关闭模态框。

最后，在样式中定义了模态框的样式，包括遮罩层、模态框头部、模态框内容等。通过这个示例，可以实现一个简单的模态框，并且单击遮罩层可关闭模态框。

基于原生 JavaScript、HTML、CSS 实现模态框，并且单击遮罩层可关闭模态框

下面是一个基于原生 JavaScript、HTML、CSS 实现的模态框，并且单击遮罩层可关闭模态框的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Modal Dialog</title>
    <style>
      .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
      }

      .modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        z-index: 10000;
      }

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }

      .modal-header h2 {
        margin: 0;
      }

      .modal-close {
        border: none;
        background-color: transparent;
        font-size: 20px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="openModalBtn">Open Modal</button>

    <div class="modal-overlay" id="modalOverlay">
      <div class="modal" id="modal">
        <div class="modal-header">
          <h2>Modal Header</h2>
          <button class="modal-close" id="modalCloseBtn">X</button>
        </div>
        <div class="modal-body">
          <p>Modal content goes here.</p>
        </div>
      </div>
    </div>

    <script>
      const openModalBtn = document.getElementById("openModalBtn");
      const modalOverlay = document.getElementById("modalOverlay");
      const modal = document.getElementById("modal");
      const modalCloseBtn = document.getElementById("modalCloseBtn");

      openModalBtn.addEventListener("click", () => {
        modalOverlay.style.display = "block";
        modal.style.display = "block";
      });

      modalCloseBtn.addEventListener("click", () => {
        modalOverlay.style.display = "none";
        modal.style.display = "none";
      });

      modalOverlay.addEventListener("click", (event) => {
        if (event.target === modalOverlay) {
          modalOverlay.style.display = "none";
          modal.style.display = "none";
        }
      });
    </script>
  </body>
</html>

在这个示例中，通过 HTML 定义了一个按钮和一个模态框，模态框包括一个遮罩层和一个内部内容区域。在 CSS 中，定义了遮罩层和模态框的样式，并且使用了 display: none 将它们初始隐藏。

在 JavaScript 中，首先获取了需要操作的 DOM 元素。在打开模态框时，将遮罩层和模态框的 display 属性设置为 block，以显示它们。在关闭模态框时，将它们的 display 属性设置为 none，以隐藏它们。在处理遮罩层单击事件时，判断当前点击的元素是否为遮罩层本身，如果是，则关闭模态框。

通过这个示例，可以实现一个简单的模态框，并且单击遮罩层可关闭模态框。

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。