javascript - dom元素全屏展示
业务场景:将 html 界面上的一个 dom 元素全屏展示
使用方式
参数传入 dom 对象即可,注意不是 jQuery 对象,Vue 下兼容
/**
* 面板全屏展示
*/
fullscreen: function () {
if (this.isFullScreen) {
// 退出全屏
this.isFullScreen = false;
screen.exitFullscreen()
} else {
// 全屏展示
this.isFullScreen = true;
let dom = this.$refs.tablePanel.$el;
screen.requestFullscreen(dom);
}
}
源码
/* eslint-disable */
/**
* 全屏显示封装
*
* @author Mr.css
* @constructor
*/
function Screen() {
//是否允许全屏
let canFull = !!(document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen);
return {
/**
* 是否允许全屏展示
*
* @returns {boolean}
*/
canFullScreen: function () {
return canFull;
},
/**
* 退出全屏展示
* @returns {Promise<void>}
*/
exitFullscreen: async function () {
if (document.exitFullscreen) {
await document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
console.info("Current browser not support dom full screen!");
}
},
/**
*
* 全屏展示
* @param dom 需要全屏展示的dom对象
* @param dom
* @returns {Promise<void>}
*/
requestFullscreen: async function (dom) {
if (dom.requestFullscreen) {
await dom.requestFullscreen();
} else if (dom.mozRequestFullScreen) {
dom.mozRequestFullScreen();
} else if (dom.webkitRequestFullScreen) {
dom.webkitRequestFullScreen();
} else if (dom.msRequestFullscreen) {
dom.msRequestFullscreen();
} else {
console.info("Current browser not support dom full screen!");
}
}
}
}
let screen = new Screen();
export default screen;
疯狂的妞妞 :每一天,做什么都好,不要什么都不做!