VUE开发--全屏插件--screenfull

screenfull.js安装、引入与使用

最新推荐文章于 2025-03-11 17:25:56 发布

原创

最新推荐文章于 2025-03-11 17:25:56 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js

博客介绍了screenfull.js的官网、安装、引入和使用方法。给出官网链接，说明了在页面引入该库的方式，列举了使用的API，还提供基于vue的实例代码，同时介绍了全屏退出的三种方式，包括按钮、ESC和F11。

官网

https://github.com/sindresorhus/screenfull.js

1、安装

npm install screenfull --save

2、引入

在你需要使用的页面引入

import screenfull from 'screenfull'

3、使用（具体API 看官网这儿只讲我用的）

screenfull.request(element, options?) 页面进入全屏如果只是某一个元素进入全屏则 screenfull.request(ele)
screenfull.isEnabled：返回一个布尔值，是否允许您进入全屏模式。如果您的网页位于内，则需要添加一个allowfullscreen属性（+webkitallowfullscreen和mozallowfullscreen）。
screenfull.isFullscreen： 返回boolean是否全屏处于活动状态。

基于vue的实例代码：可直接使用

<template>
  <div>
    <div>
      <div
        id="full"
        style="background: black; color: white"
        v-if="isFull"
        @click="fullScreen"
      >