写一个炫酷vue3弹窗组件

A：

为了编写一个炫酷的Vue3弹窗组件，我们需要在应用程序中使用Vue3，同时也需要用到Vue3的Composition API。下面是一个简单的示例：

1. 创建一个单文件组件（popup.vue），其中包含一个触发弹窗的按钮和弹窗本身。

<template>
  <div>
    <button @click="showPopup">触发弹窗</button>
    <div v-if="isPopupVisible" class="popup">
      <h2 class="popup__title">{{title}}</h2>
      <div class="popup__content">
        <slot></slot>
      </div>
      <button class="popup__close" @click="closePopup">关闭</button>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'Popup',
  props: {
    title: {
      type: String,
      default: '弹窗'
    }
  },
  setup(props, { emit }) {
    const state = reactive({
      isPopupVisible: false
    });

    const showPopup = () => {
      state.isPopupVisible = true;
    };

    const closePopup = () => {
      state.isPopupVisible = false;
      emit('close');
    };

    return {
      state,
      showPopup,
      closePopup
    };
  }
};
</script>

<style scoped>
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem;
}

.popup__title {
  margin-top: 0;
}

.popup__close {
  margin-top: 1rem;
}
</style>

2. 在应用程序中使用该组件：

<template>
  <div>
    <Popup title="弹窗1">
      <p>这是弹窗1的内容。</p>
    </Popup>
    <Popup title="弹窗2">
      <p>这是弹窗2的内容。</p>
    </Popup>
  </div>
</template>

<script>
import Popup from './popup.vue';

export default {
  name: 'App',
  components: {
    Popup
  }
};
</script>

现在，我们已经编写了一个简单的Vue3弹窗组件。我们可以在父组件中使用它，创建多个弹窗实例，并在子组件中设置不同的标题和内容。我们还可以通过事件监听器关闭弹窗，以及使用动画和其他效果来增强组件的外观和功能。