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:{
//点击按钮将参数置为true
fullScreenButton(){
//可以在任意页面使用，随时调用。
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) {
// IE11
element.msRequestFullscreen();
}
}
//全屏后立即将参数重置
this.fullscreen = false;
this.$store.commit("SET_FULLSCREEN", this.fullscreen);
},
}
},
</script>

原文链接：https://blog.csdn.net/m0_61452987/article/details/120397191