vue实现页面全屏、局部全屏等多方式全屏

1、vuex创建全局变量

在store/index中：

import Vuex from 'vuex'Vue.use(Vuex)const user = {state: {// 全屏fullscreen: false,},mutations: {// 全屏SET_FULLSCREEN: (state, fullscreen) => {state.fullscreen = fullscreen},},actions: {
}const store = new Vuex.Store({modules: {user,},
})export default store

2、使用全屏：

<template><div  id="embedContainer">将id为embedContainer的div元素全屏</div><el-button @click="fullScreenButton">点我全屏</el-button>
</template><script>
export default {components: {},//监听全局fullscreen参数调用全屏函数watch: {"$store.state.user.fullscreen": function () {if (this.$store.getters.fullscreen === true) {this.screen();}},},data() {return {// 全屏fullscreen: false,};},methods:{//点击按钮将参数置为truefullScreenButton(){//可以在任意页面使用，随时调用。this.$store.commit("SET_FULLSCREEN", true);},// 全屏screen() {//可以任意更换id选择不同的dom元素let element = document.getElementById("embedContainer");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 = false;this.$store.commit("SET_FULLSCREEN", this.fullscreen);},
}
},
</script>

vue实现页面全屏、局部全屏等多方式全屏相关推荐

vue实现页面刷新以及局部刷新的方法
1.利用Vue里面的provide+inject组合,实现全页面刷新通过在APP页面进行demo进行刷新,不会像前两种那样出现短暂的闪烁效果,提升用户体验,通常可以使用这种方式 (1)在APP页面中 ...
vue实现页面全屏和退出全屏
pc端使用vue实现页面全屏和退出全屏 element.requestFullScreen() -- 全屏显示 Element.requestFullscreen()方法用于异步请求使得Elemen ...
从一个页面跳转到用swiper写的全屏滚动页面的指定位置
问题背景从一个页面跳转到用swiper写的全屏滚动页面的指定位置,怎么实现啊? 案例我没有自己写一个全屏滚动,就在Swiper官网找了Swiper在PC端的全屏页面效果展示若有侵权请留言告知我更 ...
Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
展示效果: 全屏功能代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
WebView 视频播放，全屏按钮显示不出来，全屏后不能播放视频
最近项目的一个需求,需要在Webview 里面播放视频遇到了一些问题: 视频可以正常播放但是,视频底部的全屏按钮没了,只有一个音量按钮.修改后,点击全屏,视频不能播放. 接下来一一解决: 问题1 : ...
android x5 视频全屏,腾讯X5浏览器内核全屏播放视频相关问题
最近项目中接入了腾讯X5SDK用于展示H5与原生交互有一个需求是在线播放H5中的视频且能全屏原本是按照Demo中的代码写的.也没发现什么问题但是发现一点击全屏播放的按钮视频就卡死了. 网上搜了 ...
EasyPlayer客户demo点击全屏无法实现播放器的全屏调整优化
EasyPlayer播放器是TSINGSEE青犀视频维护的一个RTSP播放器项目,EasyPlayer遵循了标准流媒体码流协议,进行实时播放以及码流录制,在数据流的播放速度以及画质的解码显示上均做了大 ...
Android 系统（153）---全面屏项目很多APP占不满全屏
全面屏项目很多APP占不满全屏刘海屏项目,分辨率720x1498设置系统除外壁纸显示不全,且部分界面底部显示高度有2个navigationbar高度解决方案: 那是因为全面屏的长宽比超过了1.86 ...
vue 判断页面加载完成_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种骨架屏就是其中之一作为一个前端开发用户体验感是很重要的关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种现今使用骨架屏的也越来越多 ...
安卓隐藏摄像_【快讯：诺基亚发布三款安卓机；全面屏手机的最终形态，目标是去掉摄像头；iPhone 打电话不息屏或挂断电话后不亮屏是什么问题？】...
资讯一 [诺基亚发布三款安卓新机:带来了可拆后盖设计] 2月25日,诺基亚在MWC 2019正式召开发布会,发布了诺基亚4.2.诺基亚3.2.诺基亚1 Plus三款全新安卓机型. 其中诺基亚4.2是三 ...

vue实现页面全屏、局部全屏等多方式全屏

1、vuex创建全局变量

2、使用全屏：

vue实现页面全屏、局部全屏等多方式全屏相关推荐

最新文章

热门文章