手写Vue弹窗Modal的实现代码

我很乐意为你详细讲解手写Vue弹窗Modal的实现。下面是完整攻略：

步骤1：创建组件

首先，我们需要创建一个Vue组件，用于渲染Modal组件的HTML、CSS和JavaScript代码。

<template>
  <div class="modal" :class="{ active: isActive }">
    <div class="modal-background" @click="$emit('close')"></div>
    <div class="modal-content">
      <div class="box">
        <slot></slot>
      </div>
    </div>
    <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    isActive: Boolean
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.modal.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-content {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  max-width: 600px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: #fff;
}
</style>

步骤2：在Vue实例中使用组件

我们可以在Vue实例中使用这个Modal组件，以显示弹出窗口。为此，首先我们需要在Vue组件的<template>中添加一个按钮，当用户点击时，它将显示Modal组件。然后，我们需要在Vue实例中添加一个data属性，用于控制Modal组件的可见性。

<template>
  <div class="container">
    <button @click="isActive = true">Show Modal</button>
    <modal :is-active="isActive" @close="isActive = false">
      <h2 slot="header">My Modal</h2>
      <p>Here is some content for my modal.</p>
      <button @click="$emit('close')">Close Modal</button>
    </modal>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      isActive: false
    }
  }
}
</script>

<style>
.container {
  max-width: 800px;
  margin: auto;
  padding: 20px;
}
</style>

在这个示例中，我们将Modal组件插入到Vue组件的模板中，并使用isActive属性来控制Modal组件的可见性。当用户点击“Show Modal”按钮时，isActive变为true，Modal组件将被显示出来。当用户点击Modal组件的关闭按钮或背景时，Modal组件将被隐藏。

示例1：动态渲染Modal的内容

除了静态内容，我们还可以动态地渲染Modal的内容。例如，我们可以将Modal组件的标题和内容设置为Vue模板中的变量，让它们可以根据需要进行更新。下面是一个示例：

<template>
  <div class="container">
    <button @click="isActive = true">Show Modal</button>
    <modal :is-active="isActive" @close="isActive = false">
      <h2 slot="header">{{ title }}</h2>
      <p>{{ content }}</p>
      <button @click="$emit('close')">Close Modal</button>
    </modal>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      isActive: false,
      title: '',
      content: ''
    }
  },
  methods: {
    showModal(title, content) {
      this.title = title
      this.content = content
      this.isActive = true
    }
  }
}
</script>

在这个示例中，我们添加了一个showModal方法，用于动态设置Modal组件的标题和内容。当用户点击一个按钮时，我们将调用showModal方法，并传递标题和内容变量。Modal组件的标题和内容将被更新，弹出窗口将显示出来。

示例2：使用插槽自定义Modal组件

Modal组件也支持插槽，这意味着我们可以在Vue模板中自定义样式和内容。例如，我们可以添加一个footer插槽，用于在Modal组件中添加自定义底部。下面是一个示例：

<template>
  <div class="container">
    <button @click="isActive = true">Show Modal</button>
    <modal :is-active="isActive" @close="isActive = false">
      <h2 slot="header">My Modal</h2>
      <p>Here is some content for my modal.</p>
      <div slot="footer">
        <button class="button is-primary">Save Changes</button>
        <button class="button is-link" @click="$emit('close')">Cancel</button>
      </div>
    </modal>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      isActive: false
    }
  }
}
</script>

<style>
.container {
  max-width: 800px;
  margin: auto;
  padding: 20px;
}
</style>

在这个示例中，我们添加了一个footer插槽，并在Modal组件中添加了两个按钮。当用户点击“Save Changes”按钮时，我们将调用一个方法，用于保存更改。当用户点击“Cancel”按钮时，Modal组件将被隐藏。