useFullscreen
实现全屏的组合式函数
javascript
/**
* @description: 用于实现全屏的组合式函数
* @param {Object} target 全屏的目标元素,默认为document.body
* @return {*}
*/
export function useFullscreen(target = document.body) {
const isFullscreen = ref(false) // 状态信息
/**
* @description: 实现进入全屏
* @return {*}
*/
const enter = () => {
if (target.requestFullscreen) {
target.requestFullscreen()
} else if (target.mozRequestFullScreen) {
target.mozRequestFullScreen()
} else if (target.webkitRequestFullscreen) {
target.webkitRequestFullscreen()
} else if (target.msRequestFullscreen) {
target.msRequestFullscreen()
}
isFullscreen.value = true
}
/**
* @description: 实现退出全屏
* @return {*}
*/
const exit = () => {
console.log('exit')
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
isFullscreen.value = false
}
/**
* @description: 切换全屏状态
* @return {*}
*/
const toggle = () => {
isFullscreen.value ? exit() : enter()
}
// 导出绑定函数
return {
enter,
exit,
isFullscreen,
toggle
}
}