面试题：如果要实现一个 Vue3 的弹窗组件，你会如何设计？

设计一个 Vue 3 的弹窗组件需要考虑以下几个方面：组件结构、props 和事件、插槽、动画、可访问性等。以下是一个详细的设计思路和实现示例。

1. 组件结构

弹窗组件通常包含以下部分：

遮罩层（Overlay）：用于覆盖背景，突出弹窗内容。
弹窗内容（Content）：显示具体内容，支持自定义。
关闭按钮（Close Button）：用于关闭弹窗。

2. Props 和事件

通过 props 控制弹窗的行为和样式，通过 emit 事件与父组件通信。

常用 `props`：

visible：控制弹窗的显示和隐藏。
title：弹窗的标题。
closeOnClickOverlay：点击遮罩层是否关闭弹窗。
showCloseButton：是否显示关闭按钮。

常用 `emit` 事件：

update:visible：用于同步弹窗的显示状态。
close：弹窗关闭时触发。

3. 插槽（Slots）

使用插槽让弹窗内容更加灵活：

默认插槽：用于放置弹窗的主要内容。
标题插槽：用于自定义标题内容。
底部插槽：用于放置操作按钮（如确认、取消）。

4. 动画

使用 Vue 的过渡组件（<transition>）实现弹窗的显示和隐藏动画，例如淡入淡出、缩放等效果。

5. 可访问性

使用 role="dialog" 和 aria-labelledby 等属性提升可访问性。
确保弹窗可以通过键盘（如 Esc 键）关闭。

实现示例

以下是一个简单的 Vue 3 弹窗组件实现：

`Modal.vue`

<template>
  <transition name="fade">
    <div v-if="visible" class="modal-overlay" @click.self="handleOverlayClick">
      <div class="modal-content" role="dialog" aria-labelledby="modalTitle">
        <div class="modal-header">
          <slot name="header">
            <h2 id="modalTitle">{{ title }}</h2>
          </slot>
          <button v-if="showCloseButton" class="close-button" @click="closeModal">
            ×
          </button>
        </div>
        <div class="modal-body">
          <slot></slot>
        </div>
        <div class="modal-footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: 'Modal Title',
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true,
    },
    showCloseButton: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['update:visible', 'close'],
  methods: {
    closeModal() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    handleOverlayClick() {
      if (this.closeOnClickOverlay) {
        this.closeModal();
      }
    },
  },
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

6. 使用示例

在父组件中使用弹窗组件：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <Modal v-model:visible="showModal" title="自定义标题">
      <p>这是弹窗的内容。</p>
      <template #footer>
        <button @click="showModal = false">关闭</button>
      </template>
    </Modal>
  </div>
</template>

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

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