Vue 单页面/指定页面实现全屏

您所在的位置：网站首页 › 苹果手机退出全屏快捷键怎么设置 › Vue 单页面/指定页面实现全屏

Vue 单页面/指定页面实现全屏

2024-07-13 10:20| 来源: 网络整理| 查看: 265

screenfull：JavaScript全屏API跨浏览器使用的简单包装器，允许您将页面或任何元素带入全屏。消除了浏览器实现的差异，所以您不必这么做。

效果

源码

一、准备工作

1、安装依赖包

2、示例版本

二、使用步骤

1、单页面引入screenfull

2、在data中声明变量，控制显示全屏还是退出全屏的icon

3、在methods中写方法

4、在mouted和unmouted中使用on 和off方法

三、完整示例

欢迎扫描下方二维码关注VX公众号

效果

源码

GitHub - sindresorhus/screenfull: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

GitHub - sindresorhus/screenfull: Simple wrapper for cross-browser usage of the JavaScript Fullscreen APISimple wrapper for cross-browser usage of the JavaScript Fullscreen API - GitHub - sindresorhus/screenfull: Simple wrapper for cross-browser usage of the JavaScript Fullscreen APIhttps://github.com/sindresorhus/screenfull

一、准备工作 1、安装依赖包 npm install screenfull 2、示例版本 "screenfull": "^6.0.2", 二、使用步骤 1、单页面引入screenfull import screenfull from "screenfull"; 2、在data中声明变量，控制显示全屏还是退出全屏的icon data() { return { isFullscreen: false, }; }, 3、在methods中写方法 methods: { changeFullscreen() { let fullDom = document.getElementById("fullDom"); if (fullDom) screenfull.toggle(fullDom); }, change() { this.isFullscreen = screenfull.isFullscreen; }, }, 4、在mouted和unmouted中使用on 和off方法 mounted() { screenfull.on("change", this.change); }, unmounted() { screenfull.off("change", this.change); }, 三、完整示例 import screenfull from "screenfull"; export default { data() { return { isFullscreen: false, }; }, methods: { changeFullscreen() { let fullDom = document.getElementById("fullDom"); if (fullDom) screenfull.toggle(fullDom); }, change() { this.isFullscreen = screenfull.isFullscreen; }, }, mounted() { screenfull.on("change", this.change); }, unmounted() { screenfull.off("change", this.change); }, }; .about { background-color: #fff; }

tips：务必指定dom节点，更多方法请详见https://github.com/sindresorhus/screenfull

欢迎扫描下方二维码关注VX公众号

【本文地址】

Vue 单页面/指定页面实现全屏

Vue 单页面/指定页面实现全屏

今日新闻

推荐新闻

​​​​​​​Vue 单页面/指定页面实现全屏

​​​​​​​Vue 单页面/指定页面实现全屏

今日新闻

推荐新闻

Vue 单页面/指定页面实现全屏

Vue 单页面/指定页面实现全屏