html元素全屏展示
2024-09-08 18:58:15
参数传入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;
最新文章
- ES5 的 setter 和 getter
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
- Azure Table storage 之改进DynamicTableEntity类为其添加动态语言扩展
- Port Hacking
- RFS_关键字
- JAVA 处理程序异常,(try、catch、finally),(thorws)
- centos 6.5 安装lnmp(linux+nginx+mysql+php)
- Matlab安装
- Django国际化注意事项
- bzoj1047-理想的正方形(二维单调队列)
- 写个点击input框 下方弹出月份时间等
- 读Flask源代码学习Python--config原理
- JS实现悬浮导航的制作--web前端
- 剑指offer 6.查找和排序 旋转数组的最小数字
- Android RecyclerView 瀑布流滑动到最后自动加载更多
- jquery对复选框(checkbox)的操作(精华)
- 【调试技巧】 Fiddler高级用法之url映射请求
- Hadoop--Unable to load native-hadoop library for your platform... using builtin-java classes where applicable Starting namenodes on [localhost]
- scp拷贝文件报错-bash: scp: command not found
- xshell的Solarized Dark配色方案