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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天分享使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值