vue实现全屏，组件screenfull的使用

        screenfull是vue的一个全屏组件。可以实现全屏展示与正常展示的切换。并且会进行自适应。

使用步骤：

1、在vue项目中安装组件

npm install screenfull --save

2、创建一个空文件screenfull_save.vue，用于封装 screenfull组件。

<template>
  <div style="width: 100%;height: 100%;">
    <div style="float: right;height: 100%;position: relative;display: flex;align-items: center;">
      <el-button @click="screenfullClick">{{ isFullscreen ? '退出全屏' : '全屏展示' }}</el-button>
    </div>
  </div>
</template>

<script setup>
  import screenfull from 'screenfull'
  import { ref, onMounted, onUnmounted } from 'vue'
  const isFullscreen = ref(false)
  onMounted(() => {
    window.addEventListener('resize', currentScreen)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', currentScreen)
  })
  const currentScreen = () => {
    if(screenfull.isFullscreen !== isFullscreen.value) isFullscreen.value = screenfull.isFullscreen
  }
  const screenfullClick = () => {
    if (screenfull.isEnabled) screenfull.toggle()
  }
</script>
<style scoped>
  .top-right {
    float: right;
    height: 100%;
    position: relative;
  }
</style>

3、在需要展示全屏显示的页面，引入组件。

 import screenfull from "@/components/layout/screenfull_save.vue";