vue3 Popup 弹出层

Vue 3 中创建 Popup 弹出层的一种常见方法是使用组件和动态绑定。以下是一个简单的示例：

首先，创建一个名为 `Popup` 的 Vue 组件，该组件将用于显示弹出层内容。可以在组件中使用 `v-if` 或 `v-show` 来控制弹出层的显示与隐藏。

<template>
  <div class="popup" v-show="showPopup">
    <!-- 弹出层内容 -->
    <div class="popup-content">
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false // 控制弹出层显示与隐藏的标志位
    };
  }
};
</script>

<style scoped>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); // 半透明遮罩层
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
</style>

然后，在需要触发弹出层的地方，使用一个按钮或其他交互元素并绑定一个点击事件。在事件处理程序中，通过修改 `showPopup` 数据属性来控制弹出层的显示与隐藏。

<template>
  <div>
    <button @click="showPopup = !showPopup">显示弹出层</button>
    <Popup :showPopup="showPopup" /> <!-- 在需要显示弹出层的地方添加组件 -->
  </div>
</template>

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

export default {
  components: {
    Popup
  },
  data() {
    return {
      showPopup: false // 控制弹出层显示与隐藏的标志位
    };
  }
};
</script>

这样，当按钮被点击时，`showPopup` 的值将被切换，从而控制弹出层的显示与隐藏。可以根据需要对弹出层的样式和行为进行进一步的自定义。