在uniapp vue3中 创建弹出

窗口有多种方法，以下是其中的一种：

1. 在需要弹出窗口的组件中，添加一个按钮，并添加点击事件：

<template>
  <div>
    <button @click="showPopup">弹出窗口</button>
    <popup v-if="popupVisible" @close="hidePopup"></popup>
  </div>
</template>

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

export default {
  components: {
    Popup
  },
  data() {
    return {
      popupVisible: false
    }
  },
  methods: {
    showPopup() {
      this.popupVisible = true;
    },
    hidePopup() {
      this.popupVisible = false;
    }
  }
}
</script>

2. 创建一个弹出窗口组件 Popup.vue，里面包含一个关闭按钮和需要展示的内容：

<template>
  <div class="popup">
    <div class="popup-content">
      <button class="close-btn" @click="$emit('close')">关闭</button>
      <div class="popup-body">
        <!-- 填写需要展示的内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Popup'
}
</script>

<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
.popup-body {
  /* 填写需要展示的内容的样式 */
}
</style>

3. 根据需要，修改弹出窗口和内容的样式。

这种方法创建的弹出窗口是基于组件的，可以在多个地方使用，并且可以通过修改样式来满足不同的需求。