vue3弹出层代码实现

Vue3 弹出层可以通过下面的代码实现：

1. 在父组件中，定义一个变量 `showModal` 来表示是否显示弹出层，并绑定到弹出层组件的 `v-model` 上。

<template>
  <div>
    <button @click="showModal = true">打开弹出层</button>
    <modal v-model="showModal">Hello World</modal>
  </div>
</template>

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

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

2. 在弹出层组件中，使用 `teleport` 指令将弹出层渲染到 `body` 中，确保它能够遮住整个页面。

<template>
  <div class="modal-overlay" v-if="visible">
    <div class="modal-wrapper">
      <div class="modal-container">
        <div class="modal-header">
          <h4>Modal Title</h4>
          <button @click="$emit('update:visible', false)">Close</button>
        </div>
        <div class="modal-body">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  directives: {
    teleport: {
      mounted(el) {
        document.body.appendChild(el)
      },
      unmounted(el) {
        document.body.removeChild(el)
      }
    }
  }
}
</script>

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

.modal-wrapper {
  width: 400px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.modal-container {
  padding: 16px;
}

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

.modal-body {
  margin-top: 8px;
}
</style>

这样就完成了一个简单的 Vue3 弹出层组件的实现。注意，如果需要在弹出层中使用表单或者其他交互组件，还需要考虑如何处理焦点和键盘事件的问题。