使用Vue 3创建一个可复用的模态窗口组件，包含基础的打开和关闭功能

在前端开发中，模态窗口是一种常见的交互元素，通常用于确认、警告、或展示重要信息。一个好的模态窗口组件应该是可复用的，同时提供基本的打开和关闭功能。今天，我将带大家使用Vue 3创建一个这样的组件。

第一步：创建Vue 3项目

首先，我们需要有一个Vue 3项目。如果你还没有Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

安装完毕后，创建一个新的Vue项目：

vue create reusable-modal

进入项目目录：

cd reusable-modal

第二步：创建Modal组件

在src/components目录下，创建一个文件命名为Modal.vue。接下来，我们将定义这个组件的模板、样式和逻辑。

Modal.vue

<template>
  <div class="modal-overlay" v-if="isVisible">
    <div class="modal-content">
      <div class="modal-header">
        <slot name="header">
          <h3>Default Title</h3>
        </slot>
        <button class="close-button" @click="closeModal">&times;</button>
      </div>
      <div class="modal-body">
        <slot name="body">
          <p>Default Content</p>
        </slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button @click="closeModal">Close</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  data() {
    return {
      isVisible: false,
    };
  },
  methods: {
    openModal() {
      this.isVisible = true;
    },
    closeModal() {
      this.isVisible = false;
    },
  },
};
</script>

<style scoped>
.modal-overlay {
  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;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  max-width: 80%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>

组件说明

• template部分：定义模态窗口的结构。我们使用了<slot>标签，使模态窗口的内容可以被调用者自定义。
• data部分：定义了isVisible变量，控制模态窗口的显示和隐藏。
• methods部分：提供了openModal和closeModal方法，用于打开和关闭模态窗口。
• style部分：提供了模态窗口的基本样式，使其具有覆盖效果和居中显示。

第三步：在父组件中使用模态窗口

我们接下来将在父组件中使用刚刚创建的模态窗口组件。在src目录下的App.vue文件中，我们将引用和使用这个Modal组件。

App.vue

<template>
  <div id="app">
    <button @click="showModal">Open Modal</button>
    <Modal ref="modal">
      <template v-slot:header>
        <h3>Custom Header</h3>
      </template>
      <template v-slot:body>
        <p>This is a custom body content for the modal.</p>
      </template>
      <template v-slot:footer>
        <button @click="closeModal">Close</button>
      </template>
    </Modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue';

export default {
  name: 'App',
  components: {
    Modal,
  },
  methods: {
    showModal() {
      this.$refs.modal.openModal();
    },
    closeModal() {
      this.$refs.modal.closeModal();
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

说明

• 引用Modal组件：在script部分，我们引用了Modal组件，并将其注册到当前组件中。
• 使用Modal组件：在template部分，我们使用了<Modal ref="modal">。通过ref属性，我们可以在父组件中直接调用模态窗口组件的方法。
• 插槽内容：我们使用了命名插槽（v-slot），自定义了模态窗口的header、body和footer部分内容。

第四步：运行项目并测试

现在，我们已经完成了模态窗口组件的创建和使用。运行项目进行测试：

npm run serve

访问http://localhost:8080，你将看到一个按钮“Open Modal”，点击它将打开模态窗口，窗口内有自定义的头部、内容和底部。你可以点击关闭按钮来关闭模态窗口。

总结

通过以上步骤，你已经成功创建了一个可复用的Vue 3模态窗口组件，并在父组件中引用和使用它。这个模态窗口组件能够通过插槽自定义内容，同时提供了基础的打开和关闭功能。如果你需要一个更复杂的模态窗口组件，可以在此基础上进行扩展，例如添加事件监听、动画效果等。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作