vue全屏组件

<template>
  <div ref="full_screen" style="overflow: hidden;height: 100%; 100%;">
    <div ref="adapter_screen" style=" 1920px;height: 1080px;position: relative;transform-origin: 0 0 0">
      <slot></slot>
      <svg-icon :icon-class="fullScreenBtnData" class="fullScreenBtnSty" @click="fullScreenBtnFun"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: "FullScreen",
    data() {
      return {
        fullScreenBtnData: "fullscreen"
      }
    },
    mounted() {
      let fullScreen = this.$refs.full_screen
      let adapterScreen = this.$refs.adapter_screen
      adapterScreen.style.transform = `scale(${fullScreen.offsetWidth / 1920},${fullScreen.offsetHeight / 1080})`
      window.addEventListener("resize", (ev) => {
        adapterScreen.style.transform = `scale(${fullScreen.offsetWidth / 1920},${fullScreen.offsetHeight / 1080})`
      }, false)

      document.addEventListener('fullscreenchange', () => {
        if (!document.fullscreenElement) {
          this.fullScreenBtnData = 'fullscreen'
        }
      }, false)
    },
    methods: {
      fullScreenBtnFun() {
        if (this.fullScreenBtnData === 'fullscreen') {
          this.fullScreenBtnData = 'exit-fullscreen'
          this.$refs.full_screen.requestFullscreen()
        } else {
          this.fullScreenBtnData = 'fullscreen'
          document.exitFullscreen()
        }
      }
    }
  }
</script>

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