utils.ts
全局函数定义文件
/**
* 是否是全屏
* @returns
*/
function isFullScreen(): any {
return !!(
(document as any).fullscreen ||
(document as any).mozFullScreen ||
(document as any).webkitIsFullScreen ||
(document as any).webkitFullScreen ||
(document as any).msFullScreen
);
}
/**
* 全屏
* @param ele
*/
function full(ele: any): void {
if (ele.requestFullscreen) {
ele.requestFullscreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
}
/**
* 退出全屏
*/
function exitFullscreen() {
if ((document as any).exitFullScreen) {
(document as any).exitFullScreen();
} else if ((document as any).mozCancelFullScreen) {
(document as any).mozCancelFullScreen();
} else if ((document as any).webkitExitFullscreen) {
(document as any).webkitExitFullscreen();
} else if ((document as any).msExitFullscreen) {
(document as any).msExitFullscreen();
}
}
export function fullScreen(el: any | null): void {
const isSupportFullScreen =
(document as any).fullscreenEnabled ||
(document as any).mozFullScreenEnabled ||
(document as any).webkitFullscreenEnabled ||
(document as any).msFullscreenEnabled;
if (!isSupportFullScreen) {
app.$YsMessage.error("抱歉,当前游览器不支持全屏");
return;
}
// 判断当前是否是全屏
if (isFullScreen()) {
exitFullscreen();
} else {
full(el);
}
}
vue中使用全屏函数
<template>
<div ref="graph">
<span style="margin-right: 10px; font-size: 18px; cursor: pointer;" @click="fullscreen"><Icon type="ios-expand" /></span>
</div>
</template>
<script>
import { fullScreen } from "utils";
export default {
methods: {
fullscreen() {
this.$fullScreen(this.$refs.graph);
},
}
}
</script>
<style lang="scss" scoped>
</style>
vue中监听全屏事件
在全屏模式中,有时候需要监听某些事件的触发,比如监听全屏状态的改变,可以使用fullscreenchange事件来实现。代码如下:
<script>
export default {
mounted() {
document.addEventListener("fullscreenchange", this.handleFullScreenChange);
},
methods: {
handleFullScreenChange() {
if(document.fullscreenElement) {
console.log("进入全屏模式");
} else {
console.log("退出全屏模式");
}
}
}
}
</script>