如何使用插槽封装弹框组件

在Vue中，可以使用插槽封装弹框组件。以下是一个示例：

<template>
  <div>
    <button @click="showModal = true">打开弹框</button>
    <transition name="modal">
      <div v-if="showModal" class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <slot name="header">默认标题</slot>
              <button class="modal-close" @click="showModal = false">X</button>
            </div>
            <div class="modal-body">
              <slot name="body">默认内容</slot>
            </div>
            <div class="modal-footer">
              <slot name="footer">
                <button @click="showModal = false">关闭</button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

这个组件包含了一个按钮，当用户点击按钮时，弹出一个模态框。模态框的内容由插槽来提供。组件模板中定义了三个插槽，分别是header、body和footer。如果用户没有提供插槽内容，那么组件就会显示默认内容。如果用户提供了插槽内容，那么组件就会显示用户提供的内容。

这个组件使用了Vue的过渡效果来实现弹框的动画效果。当弹框出现时，会有一个淡入的效果；当弹框关闭时，会有一个淡出的效果。这个过渡效果的名称是“modal”，可以在组件的样式中定义。

这个组件的使用方法如下：

<template>
  <div>
    <my-modal>
      <template v-slot:header>
        <h2>自定义标题</h2>
      </template>
      <template v-slot:body>
        <p>自定义内容</p>
      </template>
      <template v-slot:footer>
        <button @click="showModal = false">确认</button>
      </template>
    </my-modal>
  </div>
</template>

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

export default {
  components: {
    MyModal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

在这个示例中，我们使用了自定义组件MyModal，并为它提供了三个插槽：header、body和footer。我们在这些插槽中提供了自定义的内容，以替换默认的内容。最后，我们将MyModal组件包裹在一个div中，并将这个div显示在页面上。当用户点击按钮时，弹框就会出现，并显示用户提供的内容。