vue3使用screenfull实现全屏

朱雀 2023-01-16 15:20 294阅读 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 条评论，294人围观）

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

相关阅读

相关使用编程实现PPT全屏显示

要实现PPT全屏显示，你可以使用编程语言来控制PPT应用程序，并设置其窗口属性以实现全屏效果。下面我将为你提供一种使用Python的方法来实现这个目标。首先，你需要安装`p

朱雀/ 2023年10月16日 16:19/ 0 赞/ 85 阅读

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

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

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

相关 vue3使用screenfull实现全屏

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

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

相关 vue中实现全屏功能

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

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

相关 vue 全屏组件

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

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

相关 vue 全屏和退出全屏

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

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

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

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

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

相关 vue全屏部分元素

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

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

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

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

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

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

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

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