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

最新推荐文章于 2025-12-07 02:26:52 发布

原创最新推荐文章于 2025-12-07 02:26:52 发布 · 822 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

Vue 同时被 2 个专栏收录

32 篇文章

订阅专栏

Element

15 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用screenfull库来实现全屏功能。首先通过npm安装screenfull，然后封装一个全屏组件，监听全屏状态变化，并提供全屏和退出全屏的方法。最后在父组件中引入并使用这个全屏组件，为用户提供更好的浏览体验。

今天分享使用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>