Vue3后台项目实现一键全屏缩放功能

今天分享使用screenfull实现全屏功能！

效果图

全屏前

全屏后

第一步

安装 screenfull

$ npm install screenfull

第二步

封装screenfull，用户体验更好

<!--
 * @Author: your name
 * @Date: 2021-10-28 19:31:51
 * @LastEditTime: 2021-10-28 19:56:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vue-manage-system-master/src/components/fullScreen.vue
-->
<template>
  <div class="screenfullBtn" @click="toggleScreenfull">
    {{isFullscreen ? '关闭全屏' : '全屏'}}
  </div>
</template>
 
 
<script>
import { onMounted, onUnmounted, reactive, toRefs } from 'vue'
import screenfull from 'screenfull'
import { ElMessage } from 'element-plus'
export default {
  setup () {
    const state = reactive({
      isFullscreen: false
    })

    onMounted(() => {
      if (screenfull.isEnabled) {
        screenfull.on('change', checkFullscreen)
      }
    })

    onUnmounted(() => {
      if (screenfull.isEnabled) {
        screenfull.off('change', checkFullscreen)
      }
    })

    function checkFullscreen () {
      state.isFullscreen = screenfull.isFullscreen
    }

    function toggleScreenfull () {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      } else {
        ElMessage.warning({
          message: '抱歉，当前浏览器不支持该全屏功能，可尝试使用F11触发全屏',
          center: true
        })
      }
    }

    return {
      ...toRefs(state),
      toggleScreenfull
    }
  },
}
</script>
 
<style scoped>
</style>

第三步

父组件引用

<template>
    <Screenfull />
</template>
 
<script>
    import Screenfull from './Screenfull.vue'
</script>