vue全屏组件

<template>
  <div ref="full" class="ll-full">
    <div ref="adapter" class="ll-adapter">
      <slot />
      <svg-icon :icon-class="useicon" class-name="ll-icon" @click="fullFun" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    iconFull: {
      type: String,
      default: 'full-screen'
    },
    iconExit: {
      type: String,
      default: 'full-screen-exit'
    }
  },
  data() {
    return {
      useicon: ''
    }
  },
  mounted() {
    this.useicon = this.iconFull
    this.scaleFun()
    window.addEventListener('resize', this.scaleFun, false)
    document.addEventListener('fullscreenchange', this.fullChangeFun, false)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.scaleFun)
    document.removeEventListener('fullscreenchange', this.fullChangeFun)
  },
  methods: {
    fullChangeFun() {
      if (!document.fullscreenElement) {
        this.useicon = this.iconFull
      }
    },
    scaleFun() {
      const fullScreen = this.$refs.full
      const adapterScreen = this.$refs.adapter

      let multiple = 1
      if (fullScreen.offsetWidth / 1920 < fullScreen.offsetHeight / 1080) {
        multiple = fullScreen.offsetWidth / 1920
        adapterScreen.style.transform = `translateX(-50%) scale(${multiple},${multiple})`
      } else {
        multiple = fullScreen.offsetHeight / 1080
        adapterScreen.style.transform = `translateX(-50%) scale(${multiple},${multiple})`
      }
    },
    fullFun() {
      if (this.useicon === this.iconFull) {
        this.useicon = this.iconExit
        this.$refs.full.requestFullscreen()
      } else {
        this.useicon = this.iconFull
        document.exitFullscreen()
      }
    }
  }
}
</script>

<style scoped>
  .ll-full {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #141d29;
  }

  .ll-adapter {
    width: 1920px;
    height: 1080px;
    position: absolute;
    left: 50%;
    transform-origin: 50% 0 0;
  }

  .ll-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    cursor: pointer;
    color: white;
    font-size: 18px;
  }
</style>