日常记录#7全屏功能

<template>
  <div ref="fullScreenParentWrap" class="full-screen-wrap">
    <div class="set-full-btn" @click="setFullScreen">
      <slot name="setFullBtn">
        <span class="zzbIconFont iconfangda" />
      </slot>
    </div>
    <div ref="fullscreenWrap" class="full-screen-container-wrapper full_screen_body_container_wrap" :class="isFullScreen ? 'full-fixed' : ''">
      <div class="full-screen-top-wrap">
        <div class="set-unfull-btn" @click="setUnFullScreen">
          <slot name="setUnFullBtn">
            <span class="zzbIconFont iconsuoxiao" />
          </slot>
        </div>
      </div>
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'FullScreenWrap',
  data() {
    return {
      isFullScreen: false,
      fullscreenElement: null, // 被放大元素
      fullscreenParentElement: null, // 被放大元素的父级节点
      fullscreenPrevElement: null // 被放大元素的兄弟节点
    }
  },
  watch: {
    isFullScreen(nv) {
      if (nv) {
        this.appendVideoToBody()
      } else {
        this.removeVideoFromBody()
      }
    }
  },
  beforeUnmount() {
    const { isFullScreen } = this
    if (isFullScreen) {
      this.removeVideoFromBody()
    }
  },
  beforeDestroy() {
    const { isFullScreen } = this
    if (isFullScreen) {
      this.removeVideoFromBody()
    }
  },
  beforeRouteLeave(from, to, next) {
    const { isFullScreen } = this
    if (isFullScreen) {
      this.removeVideoFromBody()
    }
    next()
  },
  mounted() {
    const parentEle = this?.['$refs']?.['fullScreenParentWrap'] || null
    const videoEle = this?.['$refs']?.['fullscreenWrap'] || null
    if (parentEle) {
      this.fullscreenParentElement = parentEle
    }
    if (videoEle) {
      this.fullscreenElement = videoEle
      const videPrevEle = videoEle?.['previousElementSibling'] || null
      if (videPrevEle) {
        this.fullscreenPrevElement = videPrevEle
      }
    }
  },
  methods: {
    setFullScreen() {
      this.isFullScreen = true
      this.$emit('fullscreen', true)
    },
    setUnFullScreen() {
      this.isFullScreen = false
      this.$emit('fullscreen', false)
    },
    appendVideoToBody() {
      const { fullscreenElement } = this
      if (!fullscreenElement) {
        return
      }
      document.querySelector('body').append(fullscreenElement)
    },
    removeVideoFromBody() {
      const { fullscreenPrevElement, fullscreenParentElement, fullscreenElement } = this
      if (!fullscreenElement || !fullscreenParentElement) {
        return
      }
      if (fullscreenPrevElement) {
        fullscreenPrevElement.insertAdjacentElement('afterend', fullscreenElement)
      } else {
        fullscreenParentElement.appendChild(fullscreenElement)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.full-screen-wrap{
  position: relative;
  .set-full-btn{
    position: absolute;
    z-index: 99;
    top: 10px;
    right: 10px;
    padding: 5px;
    .zzbIconFont{
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
    }
  }
  .full-screen-container-wrapper{
  }
  .full-screen-top-wrap{
    display: none;
  }
}
</style>
<style lang="scss">
.full_screen_body_container_wrap{
  &.full-fixed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    & + div{
      height: calc(100% - 48px);
    }
  }
  .full-screen-top-wrap{
    .set-unfull-btn{
      position: absolute;
      z-index: 99;
      background-color: transparent;
      top: 10px;
      right: 10px;
      padding: 5px;
      cursor: pointer;
    }
    .zzbIconFont{
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>