vue3封装一个弹窗组件

Vue3是一款流行的JavaScript框架，它在构建用户界面方面非常强大。以下是一个示例代码，用于封装一个基本的弹窗组件：

<template>
  <div>
    <button @click="showModal">打开弹窗</button>
    <div v-if="isOpen" class="modal">
      <div class="modal-content">
        <slot></slot>
        <button @click="closeModal">关闭弹窗</button>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'Modal',
  setup() {
    const isOpen = ref(false);

    const showModal = () => {
      isOpen.value = true;
    };

    const closeModal = () => {
      isOpen.value = false;
    };

    return {
      isOpen,
      showModal,
      closeModal
    };
  },
};
</script>

<style scoped>
.modal {
  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-color: white;
  padding: 20px;
}

button {
  margin-top: 10px;
}
</style>

这个弹窗组件包含了一个按钮和一个模态框。当点击按钮时，模态框会显示出来，并且渲染出插槽内容。关闭按钮可以用于关闭模态框。在模态框外部点击也可以关闭模态框。

这个组件使用Vue3的Composition API来定义逻辑。通过ref函数创建一个响应式引用isOpen，用于跟踪模态框的开启和关闭状态。showModal方法用于打开模态框，closeModal方法用于关闭模态框。使用slot插槽来动态渲染弹窗内容。

在样式上，将模态框设置为固定定位，并使用背景色来实现半透明遮罩效果。模态框内容使用白色背景并设置内边距。