vue---网页全屏

使用screenfull插件

安装：npm install --save screenfull

导入：import screenfull from "screenfull"

首页：一定要有一个ref绑定，这里用ref=‘shcontainer’ 绑定

<template><div id="zonghebox" ref='shcontainer'>//这里写页面代码</div>
</template>

这儿是点击按钮以及方法

<el-button @click='getFullCreeen' circle><i class='el-icon-rank' style='color: #ffffff'></i>
</el-button>

data中 定义：
fullscreen: true,
num1: 0,
num2: 0,//监听
watch: {fullscreen () {this.num1++this.num2++}},//方法
getFullCreeen(){let me = this;if (!screenfull.enabled) {me.$message('您的浏览器不能全屏')return false}me.fullscreen = screenfull.isFullscreen//布尔值——当前页面是否全屏screenfull.toggle(me.$refs.shcontainer)//指定元素全屏},

vue---网页全屏相关推荐

vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大
vue框架中使用iframe内嵌网页,并且双击实现网页全屏放大利用Iframe插入网页 <iframe ref="iframe" src="https://www ...
esc键退出全屏 vue_Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作
Js 网页全屏(vue) 效果描述以下逻辑均正常点击按钮全屏.点击按钮退出全屏.再点击按钮全屏点击按钮全屏,F11 / ESC 退出全屏,点击按钮全屏 F11 进入全屏,点击按钮退出全屏不同页 ...
自动打开html网页脚本,开启网页全屏插件(自动开启网页全屏脚本js插件)
开启网页全屏插件(自动开启网页全屏脚本js插件)是由作者陈鹏杰分享的一个浏览器扩展插件.通过本脚本,用户在网页加载完4秒后,启动网页全屏.非常简单方便快捷! 脚本描述: 在以下网页开启网页全屏 b 站 ...
vue上下全屏翻页_全屏翻页布局
vue上下全屏翻页 View demo 查看演示Download Source 下载源 We have received a couple of requests on how to use the ...
熊猫怎么用html5看直播,熊猫TV HTML5播放器自动网页全屏
// ==UserScript== // @name 熊猫TV HTML5播放器自动网页全屏 // @name:zh-CN 熊猫TV HTML5播放器自动网页全屏 // @namespace pand ...
JSP网页全屏显示、退出全屏、关闭页面
[转]JSP网页全屏显示.退出全屏.关闭页面 jsp相关知识 2009-06-07 20:36:42 阅读108 评论0 字号:大中小订阅全屏显示 ---------------------- ...
谷歌浏览器中polyv直播间设置网页全屏和打开下置评论区
疫情期间,上网课,使用的是保利威polyv的直播服务打开直播间点击切换flash 会弹出以下窗口: 点击它,发现Chrome不允许运行flash(Chrome默认禁止flash) 地址栏右边出现插 ...
截取网页全屏的两种方法
截取网页全屏的方式很多时候我们需要对网页的全部内容进行一个截屏,但像微信或者QQ的截图方式只能截取当前页面的内容,下面介绍几种比较简单的截取页面全部内容的方法. 1.谷歌浏览器自带截图功能 2.使用 ...
html如何让网页全屏,使网页能全屏显示方法
不论是IE还是360安全浏览器,网页全屏显示方法如下: 单击视图--全屏显示,都可以进入网页全屏显示模式. 除了单击菜单,也可以按下网页全屏显示快捷键:F11键,按下F11键,就可以切换到网页全屏显示 ...
JavaScript网页全屏API
在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...

vue---网页全屏

vue---网页全屏相关推荐

最新文章

热门文章