vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等

安装

npm install screenfull --save

使用方法

import screenfull from "screenfull";

属性

screenfull.isFullscreen; // 布尔值——当前页面是否全屏
screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏

方法

默认作用于全屏，若想作用于指定元素，则将指定元素作为参数传入。

screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换

使用范例

整页全屏

<i class="el-icon-full-screen" @click="fullScreen"></i>

    fullScreen() {if (screenfull.isEnabled && !screenfull.isFullscreen) {screenfull.request();}},

整页退出全屏

<i class="icon-exit-screen" @click="exitFullScreen"></i>

exitFullScreen() {if (screenfull.isEnabled && screenfull.isFullscreen) {screenfull.exit();}
},

全屏切换

<i class="el-icon-data-line" @click="toggleFullScreen"></i>

toggleFullScreen() {if (screenfull.isEnabled) {screenfull.toggle();}
},

指定元素全屏

    <imgref="myImg"width="100"src="https://tenfei02.cfp.cn/creative/vcg/veer/1600water/veer-385736296.jpg"alt=""/><i class="el-icon-data-line" @click="toggleFullScreen"></i>

toggleFullScreen() {if (screenfull.isEnabled) {screenfull.toggle(this.$refs.myImg);}
},

vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等相关推荐

video全屏操作栏自定义样式js 指定元素全屏视频截图下载
目录 1. 页面结构 2. 全屏方法 3. 截图方法 4. 样式代码 5. 效果截图 6. 附上完整代码最近遇到的需求就是重新video标签的控制栏的样式,包括进度条.音量.倍速.全屏等样式,在正常 ...
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
各部分功能代码详见注释: <template><div><button v-if="!ifFullScreen" @click="fullS ...
html纵向滚动特效,带视觉差效果的垂直全屏整页滚动特效
这是一款效果非常炫酷的带视觉差效果的垂直全屏整页滚动特效.该特效使用jQuery和CSS3完成,用户可以通过滚动鼠标来一次垂直切换一个页面,在页面切换的时候还带有一些视觉差特效. 使用方法 HTML结 ...
IE浏览器整页截屏程序
最近项目中涉及到浏览器整页截屏的功能,有点复杂,研究了一天,终于在IE浏览器下实现,至于其他浏览器,以后再研究. 所谓整页截屏,就是说把整个页面全部截进去,包括通过滚动才能看到的部分. 在网上搜了一下 ...
安卓隐藏摄像_【快讯：诺基亚发布三款安卓机；全面屏手机的最终形态，目标是去掉摄像头；iPhone 打电话不息屏或挂断电话后不亮屏是什么问题？】...
资讯一 [诺基亚发布三款安卓新机:带来了可拆后盖设计] 2月25日,诺基亚在MWC 2019正式召开发布会,发布了诺基亚4.2.诺基亚3.2.诺基亚1 Plus三款全新安卓机型. 其中诺基亚4.2是三 ...
Flash全屏播放外部多个Flv视频并且按键进行切换+全屏播放外部Flv视频+指定元件播放外部Flv视频(非全屏)(可以作为遮罩来播放)
目录一.目的: 1.Flash全屏播放外部多个Flv视频并且按键进行切换+全屏播放外部Flv视频+指定元件播放外部Flv视频(非全屏),所以将其记录下来二.参考: 1.[AS3编程教学]如何加载并 ...
js监听退出div的全屏
window.addEventListener('fullscreenchange', e => { // 监听到屏幕变化,在回调中判断是否已退出全屏 console.l ...
java+selenium+chromedriver 整页截屏
通过selenium拖动界面形式,待页面加载完全后进行页面截图,代码如下: ChromeDriver driver = null; while (driver == null){// 从队列中获取已准 ...
定制自己的windows terminal。支持分屏多标签页的生产力工具？
序一直以来都在Windows环境下配置管理Linux服务器,一个趁手好用的终端是必须的.从Putty,SecureCRT,Xshell到MobaXterm这些终端工具各有千秋. 现在主力用MobaX ...

vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等

安装

使用方法

属性

方法

使用范例

整页全屏

整页退出全屏

全屏切换

指定元素全屏

vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等相关推荐

最新文章

热门文章