vue 内容块全屏单页面_vue中实现点击变成全屏的多种方法

小灰灰 2023-10-05 18:06 16阅读 0赞

项目中有点击按钮实现全屏功能

方式一：js实现全屏

全屏

data：

data() \{

return \{

fullscreen: false

\};

\},

methods：

screen() \{

let element = document.documentElement;

if (this.fullscreen) \{

if (document.exitFullscreen) \{

document.exitFullscreen();

\} else if (document.webkitCancelFullScreen) \{

document.webkitCancelFullScreen();

\} else if (document.mozCancelFullScreen) \{

document.mozCancelFullScreen();

\} else if (document.msExitFullscreen) \{

document.msExitFullscreen();

\}

\} else \{

if (element.requestFullscreen) \{

element.requestFullscreen();

\} else if (element.webkitRequestFullScreen) \{

element.webkitRequestFullScreen();

\} else if (element.mozRequestFullScreen) \{

element.mozRequestFullScreen();

\} else if (element.msRequestFullscreen) \{

// IE11

element.msRequestFullscreen();

\}

\}

this.fullscreen = !this.fullscreen;

\},

方式二：使用的是sreenfull插件，执行命令安装

npm install --save screenfull

在使用的页面正确引入：

import screenfull from ‘screenfull'

代码如下：

全屏

data:

data() \{

return \{

fullscreen: false

\};

\},

methods：

screen() \{

// 如果不允许进入全屏，发出不允许提示

if (!screenfull.enabled) \{

this.$message("您的浏览器不能全屏");

return false;

\}

screenfull.toggle();

this.$message.success("全屏啦");

\},

效果图：

![Image 1][]

实用

到此这篇关于vue中实现点击变成全屏的多种方法的文章就介绍到这了,更多相关vue点击全屏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

时间： 2020-09-25

[Image 1]:

发表评论取消回复

表情：

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

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

相关阅读

相关 vue 内容块全屏单页面_vue中实现点击变成全屏的多种方法

项目中有点击按钮实现全屏功能方式一：js实现全屏全屏 data： data() \{ return \{ fullscreen: false \}; \},

小灰灰/ 2023年10月05日 18:06/ 0 赞/ 17 阅读

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

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

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

相关 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 赞/ 318 阅读

相关 vue全屏部分元素

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

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

相关 js实现页面全屏

//该方法要有点击事件触发才能实现全屏效果 function launchFullScreen(element) { / 处理全屏/

比眉伴天荒/ 2022年04月08日 08:47/ 0 赞/ 363 阅读

相关 js点击按钮实现全屏效果

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

旧城等待，/ 2022年01月19日 03:34/ 0 赞/ 761 阅读

相关 JavaScript点击进入全屏和退出全屏

目录效果图核心代码完整案例效果图 ![点击进入全屏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

向右看齐/ 2021年09月22日 01:01/ 0 赞/ 577 阅读

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

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

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