82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
|
/**
|
|||
|
|
* 屏幕方向管理工具类
|
|||
|
|
* 用于检测和处理屏幕方向变化
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
/**
|
|||
|
|
* 监听屏幕方向变化
|
|||
|
|
* @param {Function} callback 方向变化时的回调函数
|
|||
|
|
* @returns {Object} 包含remove方法的对象，用于移除监听
|
|||
|
|
*/
|
|||
|
|
onOrientationChange(callback) {
|
|||
|
|
// 监听window的orientationchange事件
|
|||
|
|
const handleOrientationChange = () => {
|
|||
|
|
const orientation = window.orientation || 0;
|
|||
|
|
const isLandscape = Math.abs(orientation) === 90;
|
|||
|
|
const isPortrait = orientation === 0 || orientation === 180;
|
|||
|
|
|
|||
|
|
callback({
|
|||
|
|
orientation,
|
|||
|
|
isLandscape,
|
|||
|
|
isPortrait
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
window.addEventListener('orientationchange', handleOrientationChange);
|
|||
|
|
|
|||
|
|
// 立即执行一次回调，获取当前方向
|
|||
|
|
handleOrientationChange();
|
|||
|
|
|
|||
|
|
// 返回移除监听的方法
|
|||
|
|
return {
|
|||
|
|
remove: () => {
|
|||
|
|
window.removeEventListener('orientationchange', handleOrientationChange);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取当前屏幕方向
|
|||
|
|
* @returns {Object} 包含orientation、isLandscape、isPortrait属性的对象
|
|||
|
|
*/
|
|||
|
|
getCurrentOrientation() {
|
|||
|
|
const orientation = window.orientation || 0;
|
|||
|
|
return {
|
|||
|
|
orientation,
|
|||
|
|
isLandscape: Math.abs(orientation) === 90,
|
|||
|
|
isPortrait: orientation === 0 || orientation === 180
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 请求全屏显示
|
|||
|
|
* 对于视频播放等场景很有用
|
|||
|
|
* @param {HTMLElement} element 要全屏显示的元素，默认为document.documentElement
|
|||
|
|
*/
|
|||
|
|
requestFullscreen(element = document.documentElement) {
|
|||
|
|
if (element.requestFullscreen) {
|
|||
|
|
element.requestFullscreen();
|
|||
|
|
} else if (element.mozRequestFullScreen) {
|
|||
|
|
element.mozRequestFullScreen();
|
|||
|
|
} else if (element.webkitRequestFullscreen) {
|
|||
|
|
element.webkitRequestFullscreen();
|
|||
|
|
} else if (element.msRequestFullscreen) {
|
|||
|
|
element.msRequestFullscreen();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 退出全屏
|
|||
|
|
*/
|
|||
|
|
exitFullscreen() {
|
|||
|
|
if (document.exitFullscreen) {
|
|||
|
|
document.exitFullscreen();
|
|||
|
|
} else if (document.mozCancelFullScreen) {
|
|||
|
|
document.mozCancelFullScreen();
|
|||
|
|
} else if (document.webkitExitFullscreen) {
|
|||
|
|
document.webkitExitFullscreen();
|
|||
|
|
} else if (document.msExitFullscreen) {
|
|||
|
|
document.msExitFullscreen();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|