vue3 全屏及局部全屏组件screenfull的使用

toocool404

已于 2022-07-01 11:15:15 修改

阅读量2.9k

点赞数 4

文章标签： javascript 前端开发语言 vue.js

于 2022-07-01 11:14:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45941959/article/details/125554220

版权

本文介绍了如何使用screenfull库在Vue项目中实现全屏功能，包括整页全屏及指定元素全屏的方法，并提供了具体的代码示例。

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

1.安装依赖

  npm install --save screenfull

2.在需要设置的页面导入

    import screenfull from "screenfull";

整页全屏
页面使用

<template>
    <el-button @click="requestFullScreen">全屏</el-button>
</template>

  const requestFullScreen = () => {
       if (screenfull.isEnabled) {
        screenfull.toggle()
      }
    }

指定元素全屏
页面使用

   <div  @click="toggleFullscreen()">页内全屏<div/>  
   <div id="log"></div> //需要放大得元素

   const toggleFullscreen = () => {
       const ele = document.getElementById('log');//指定全屏区域元素
       if (screenfull.isEnabled) {
          screenfull.request(ele);
        }
      }

#log {
  overflow: auto; //超出全屏内容出现滚动条
}