bd-admin
Version:
一款能根据需求快速配置vue后台管理的脚手架
77 lines (76 loc) • 2.23 kB
JavaScript
import { ref, onMounted, onBeforeUnmount } from "vue";
const screen = ref(false);
const clickFullscreen = () => {
fullscreen();
screen.value = getFullscreen();
};
const fullscreen = () => {
const element = document.documentElement;
if (!element)
return;
if (!document.fullscreenEnabled) {
return Promise.reject(new Error("全屏模式被禁用"));
}
if (getFullscreen()) {
exitFullScreen();
return;
}
let result = null;
if (element.requestFullscreen) {
result = element.requestFullscreen();
}
else if (element.mozRequestFullScreen) {
/* Firefox */
result = element.mozRequestFullScreen();
}
else if (element.webkitRequestFullscreen) {
/* Chrome, Safari 和 Opera */
result = element.webkitRequestFullscreen();
}
else if (element.msRequestFullscreen) {
/* IE/Edge */
result = element.msRequestFullscreen();
}
return result || Promise.reject(new Error("不支持全屏"));
};
// 退出全屏
const exitFullScreen = (element) => {
const d = element ? element : document;
const full = d.cancelFullScreen ||
d.webkitCancelFullScreen ||
d.mozCancelFullScreen ||
d.exitFullScreen;
if (typeof full !== "undefined" && full) {
full.call(d);
return;
}
};
const getFullscreen = () => {
const flag = document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen;
return flag;
};
function resize() {
screen.value = getFullscreen();
}
function KeyDown(event) {
if (event.keyCode === 122 || event.keyCode === 27) {
event.returnValue = false;
clickFullscreen();
return;
}
}
export function useScreen() {
onBeforeUnmount(() => {
document.removeEventListener("keydown", KeyDown); // 监听按键事件
document.removeEventListener("resize", resize);
});
onMounted(() => {
window.addEventListener("resize", resize);
document.addEventListener("keydown", KeyDown, true); // 监听按键事件
});
return { clickFullscreen, screen };
}