官网
https://github.com/sindresorhus/screenfull.js
1、安装
npm install screenfull --save
2、引入
在你需要使用的页面引入
import screenfull from 'screenfull'
3、使用 (具体API 看官网 这儿只讲我用的)
screenfull.request(element, options?)
页面进入全屏 如果只是某一个元素进入全屏 则 screenfull.request(ele)
screenfull.isEnabled:返回一个布尔值,是否允许您进入全屏模式。如果您的网页位于内,
则需要添加一个allowfullscreen属性(+webkitallowfullscreen和mozallowfullscreen)。
screenfull.isFullscreen:返回boolean是否全屏处于活动状态。
基于vue的实例代码:可直接使用
<template>
<div>
<div>
<div
id="full"
style="background: black; color: white"
v-if="isFull"
@click="fullScreen"
>
进入全屏
</div>
<div
style="background: pink; color: white"
v-else
@click="exitFullScreen"
>
退出全屏
</div>
</div>
</div>
</template>
<script>
import screenfull from "screenfull"; // 引入screenfull
export default {
name: "",
props: {},
components: {},
data() {
return {
isFull: true, // 判断是否全屏,默认不全屏
};
},
methods: {
// 全屏事件
fullScreen() {
this.isFull = false;
if (screenfull.isEnabled) {// 返回一个布尔值,是否允许您进入全屏模式 如果你当前是非全屏 则返回true
var full = document.getElementById("full");
screenfull.request(full); // 如果不要full 则页面全屏
}
},
// 退出全屏事件
exitFullScreen() {
this.isFull = true;
screenfull.exit(); //提出全屏
},
},
mounted() {
var _this = this;
window.onresize = function () {
screenfull.on("change", () => {
if (screenfull.isFullscreen) { // 返回boolean是否全屏处于活动状态 全屏时为true
//表示全屏
_this.isFull = false;
} else {
_this.isFull = true
}
});
};
},
watch: {},
computed: {},
};
</script>
<style scoped lang='scss'>
</style>
window.onresize(事件会在窗口或框架被调整大小时触发)的this是指向window的所以 这里需要保存vue的this
全屏的退出这儿有三种方式
1、 通过按钮 (点击事件退出全屏)
2、通过ESC
3、通过F11
后两种的实现必须加入mounted中的代码
按钮的进入全屏和退出全屏 最好使用原生js
//全屏
function fullScreen() {
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
//退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}