vue3使用screenfull实现全屏

朱雀 2023-01-16 15:20 280阅读 0赞

# 理论 #

npm地址：[https://www.npmjs.com/package/screenfull][https_www.npmjs.com_package_screenfull]

## 使用方法 ##

1.  安装  
    npm install screenfull --save
2.  在使用.vue文件中 引入  
    import screenfull from ‘screenfull’
3.  在按钮方法中调用方法可以双向切换全屏与非全屏  
    screenfull.toggle()

还可以

*  检测全屏状态  
    screenfull.isFullscreen
 *  测试浏览器是否支持全screenfull  
    screenfull.isEnabled

## API ##

screenfull 插件常用方法：

*  .request(ele) 全屏
 *  .exit() 退出全屏
 *  .toggle() 切换全屏
 *  .on(event, function) ： event为 ‘change’ | ‘error’ 注册事件
 *  .off(event, function) ： 移除前面已经注册的事件
 *  .element： 返回一个全屏的dom节点，如果没有就为 null
 *  .isFullscreen : 是否是全屏状态
 *  .isEnabled ： 判断是否支持全屏

# 示例 #

## 安装screenfull ##

> cnpm install --save screenfull

## 页面使用 ##

<template>
        <el-button @click="toggleFullscreen">全屏</el-button>
    </template>
    
    <script lang="ts"> import screenfull from 'screenfull' export default { name: 'Home', setup() { function toggleFullscreen() { if (screenfull.isEnabled) { screenfull.toggle() } } return { toggleFullscreen } } } </script>

[https_www.npmjs.com_package_screenfull]: https://www.npmjs.com/package/screenfull

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关前端vue实现全屏和按esc退出全屏功能

效果如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

￡神魔★判官ぃ/ 2023年03月13日 11:36/ 0 赞/ 14 阅读

相关 vue3使用screenfull实现全屏

理论 npm地址：[https://www.npmjs.com/package/screenfull][https_www.npmjs.com_package_scree

朱雀/ 2023年01月16日 15:20/ 0 赞/ 281 阅读

相关 vue中实现全屏功能

安装全屏插件 npm i screenfull --save 页面引入 import screenfull from 'screenfull'; htm

女爷i/ 2023年01月08日 05:25/ 0 赞/ 193 阅读

相关 vue 全屏组件

第一步，安装依赖安装[screenfull.js][]依赖包 npm install screenfull -S 第二步，添加组件图标，样式等

梦里梦外;/ 2022年12月17日 07:12/ 0 赞/ 199 阅读

相关 vue 全屏和退出全屏

html源码： <div id="allScreen" @click="showScreen" > <div >全屏内容 </div>

Dear 丶/ 2022年12月06日 15:48/ 0 赞/ 293 阅读

相关 api窗口全屏_使用全屏API

api窗口全屏 In this article, we’ll cover the [Fullscreen API][] with ample amounts of code

缺乏、安全感/ 2022年11月27日 04:27/ 0 赞/ 222 阅读

相关 vue全屏部分元素

直接上代码： <template> <Card id="cardHeight"> <div style="width:100%

拼搏现实的明天。/ 2022年04月10日 01:51/ 0 赞/ 292 阅读

相关 vue项目中使用screenfull.js实现全屏，缩放功能

1. 第一步安装依赖 `cnpm install --save screenfull` 2. 封装组件 components下创建文件夹Screenfull 下创建文件in

Bertha 。/ 2021年12月05日 12:57/ 0 赞/ 759 阅读

相关 JavaScript实现全屏与退出全屏功能

js全屏与退出全屏 //全屏显式 function showFull() { var full = docu

待我称王封你为后i/ 2021年08月28日 20:10/ 0 赞/ 605 阅读

相关 vue中使用screenfull插件实现页面全屏

安装screenfull cnpm i screenfull -S template代码： <template> <div>

谁践踏了优雅/ 2021年07月25日 20:33/ 0 赞/ 532 阅读