vue中实现页面全屏和指定元素全屏

1.vue中如何快速实现页面的全屏？

案例1：点击fullScreen按钮（icon），实现整个页面的全屏：

代码：

<a-icon type="fullscreen" style="font-size: 22px;margin-left: 10px;" id="fullscreen_button" @click="handleFullScreen()"
/>

export default {name: "index",data(){return{fullscreen: false}},methods:{handleFullScreen(){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) {// IE11element.msRequestFullscreen();}}this.fullscreen = !this.fullscreen;}}
}

2.vue中如何实现页面的指定元素全屏？

安装依赖(有淘宝镜像用cnpm，没有就npm)：

cnpm install screenfull --save

引入需要全屏的页面中使用：

import screenfull from "screenfull";

给要点击实现全屏的按钮和全屏的区域元素设置id：

<a-icon type="fullscreen" style="font-size: 22px;margin-left: 10px;" id="fullscreen_button"/><div id="container_max"><a-row :gutter="24"><a-col :sm="24" :md="18" :xl="18"><div:style="{ width: '100%', height: scrollHeight - 60 + 'px', border: '1px solid #ccc', padding: '10px' }"><h3 style="font-weight: bolder;">图片</h3><img src="../../assets/images/confImg.jpg" alt="" style="width: 100%; height: 100%;"></div></a-col><a-col :sm="24" :md="6" :xl="6"><div :style="{ width: '100%', height: scrollHeight - 60 + 'px', border: '1px solid #ccc', padding: '10px' }"><h3 style="font-weight: bolder;">视频</h3><video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoplay controls style="width: 100%; height: auto;"></video></div></a-col></a-row>
</div>

mounted() {const element = document.getElementById('container_max');//指定全屏区域元素document.getElementById('fullscreen_button').addEventListener('click', () => {if (screenfull.isEnabled) {screenfull.request(element);}});//实现模块全屏
}

3.vue中如何实现全屏时候Esc按键功能？

//是否全屏并按键ESC键的方法
fullscreenElement() {var fullscreenEle = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;return fullscreenEle;
},

全屏时候防抖：

    //全屏fullscreenDocument: debounce(function() {let fullHome = document.getElementById("home");document.getElementById("home").style.height = "100%";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 (fullHome.requestFullscreen) {fullHome.requestFullscreen();} else if (fullHome.webkitRequestFullScreen) {fullHome.webkitRequestFullScreen();} else if (fullHome.mozRequestFullScreen) {fullHome.mozRequestFullScreen();} else if (fullHome.msRequestFullscreen) {// IE11fullHome.msRequestFullscreen();}}this.fullscreen = !this.fullscreen;},1000,{ leading: true, trailing: false }),

vue中实现页面全屏和指定元素全屏相关推荐

vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等
安装 npm install screenfull --save 使用方法 import screenfull from "screenfull"; 属性 screenfull.i ...
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
各部分功能代码详见注释: <template><div><button v-if="!ifFullScreen" @click="fullS ...
vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突
在vue中如何处理同一个页面中有多个swiper,首先我们需要分2中情况: 1.如果在vue中采用 Vue-Awesome-Swiper,如果采用这种方式的话,可以给每个swiper组件添加一个cla ...
vue中同一页面多个video播放问题
项目中同一页面中同时存在两个视频,播放A视频时,又播放B视频,声音会叠加,因此,需要在播放一视频时,将另一视频停掉. 此处视频路径是分开存储,因此在播放对应视频时传入对应的参数,调用该方法时使用v- ...
js微信禁用右上角的分享按钮，，和vue中微信页面禁用右上角的分享按钮的问题
1.隐藏微信网页右上角的按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过 ...
vue中嵌套页面（iframe）
vue中嵌套iframe,将要嵌套的文件放在static下面.src可以使用相对路径,也可使用服务器根路径http:localhost:8088/- <iframe src="../. ...
【Vue】Vue中的data数据包含html标签元素的解决方法
通过:v-html,html代码: <div v-html="cont"></div> vue中data数据: cont: "<a href ...
vue中城市页面的实现方法（带右侧字母滑动和点击）
需要引入的插件 npm install better-scroll --save npm install axios --save 父组件代码 <template><div>& ...

vue中实现页面全屏和指定元素全屏

vue中实现页面全屏和指定元素全屏相关推荐

最新文章

热门文章