<template>
  <view class="popup" v-if="show" @click="handleClose">
    <view class="popup-content" @click.stop="handleStop">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "Popup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    handleStop() {
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  &-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>