uni-app 全屏popup

在uni-app中，创建一个全屏的popup通常可以通过自定义组件来实现。下面是一个简单的示例，展示了如何使用uni-app创建一个全屏的popup组件。

首先，创建一个名为FullScreenPopup.vue的自定义组件：

<template>
  <view v-if="visible" class="popup-overlay" @click.stop="handleClickOutside">
    <view class="popup-content" @click.stop>
      <slot></slot>
      <view class="close-btn" @click="closePopup">关闭</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show(newVal) {
      this.visible = newVal;
    }
  },
  methods: {
    handleClickOutside() {
      this.$emit('update:show', false);
    },
    closePopup() {
      this.$emit('update:show', false);
    }
  }
};
</script>

<style scoped>
.popup-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;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  text-align: center;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>

然后，在你的页面中使用这个组件，例如index.vue：

<template>
  <view>
    <button @click="showPopup = !showPopup">显示Popup</button>
    <FullScreenPopup :show.sync="showPopup">
      <text>这是一个全屏的Popup</text>
    </FullScreenPopup>
  </view>
</template>

<script>
import FullScreenPopup from '@/components/FullScreenPopup.vue';

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

在这个例子中，FullScreenPopup组件通过show属性控制其显示状态，使用.sync修饰符实现父子组件之间的双向绑定。当点击按钮时，showPopup的状态会切换，从而控制popup的显示和隐藏。Popup组件内部包含了一个关闭按钮，点击后也会触发update:show事件来隐藏popup。

这个示例展示了如何创建一个简单的全屏popup，你可以根据需要进一步自定义样式和功能。