bbs.hoolihome.com/components/common/FullScreen.vue

<template>
  <div
    v-show="dialogStatus"
    :style="{'background-color': `rgba(0, 0, 0, ${alpha})`, 'z-index': zIndex}"
    class="full-screen-dialog-wrap"
    @click="$emit('close')">
    <div
      :style="{ width: width }"
      class="full-screen-dialog-container"
      @click.stop>
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FullScreen',
  props: {
    dialogStatus: {
      type: Boolean,
      default: false
    },
    alpha: {
      type: Number,
      default: 0.85
    },
    zIndex: {
      type: Number,
      default: 1000
    },
    width: {
      type: String,
      default: '500px'
    }
  },
  watch: {
    dialogStatus(status) {
      document.body.style.overflow = status ? 'hidden' : ''
    }
  },
  mounted() {
    // 固定body样式
    document.body.style.overflow = this.dialogStatus ? 'hidden' : ''
  },
  destroyed() {
    // 取消固定body样式
    document.body.style.overflow = ''
  }
}
</script>

<style lang="less">
.full-screen-dialog-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  display: flex;
  padding: 50px;
  .full-screen-dialog-container {
    position: relative;
    margin: auto;
  }
}
</style>