From ea81769d64e3ffe476d652fdf049de729b19173f Mon Sep 17 00:00:00 2001 From: chf <156704883@qq.com> Date: Fri, 22 Jul 2022 10:59:21 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E5=85=A8=E5=B1=8F?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=20ifram=20?= =?UTF-8?q?=E5=86=85=E5=85=83=E7=B4=A0=E5=85=A8=E5=B1=8F,=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=85=A8=E5=B1=8F=E7=BB=84=E4=BB=B6demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/data/menu.json | 7 ++ component/pear/css/module/fullscreen.css | 12 +++ component/pear/css/pear.css | 3 +- component/pear/module/admin.js | 58 +++-------- component/pear/module/fullscreen.js | 46 +++++++++ component/pear/module/tab.js | 14 +-- component/pear/pear.js | 3 +- view/document/fullscreen.html | 119 +++++++++++++++++++++++ 8 files changed, 206 insertions(+), 56 deletions(-) create mode 100644 component/pear/css/module/fullscreen.css create mode 100644 component/pear/module/fullscreen.js create mode 100644 view/document/fullscreen.html diff --git a/admin/data/menu.json b/admin/data/menu.json index 61bccc5..232b006 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -249,6 +249,13 @@ "type": 1, "openType": "_iframe", "href": "view/document/watermark.html" + }, + { + "id": 2047, + "title": "全屏组件", + "type": 1, + "openType": "_iframe", + "href": "view/document/fullscreen.html" } ] }] diff --git a/component/pear/css/module/fullscreen.css b/component/pear/css/module/fullscreen.css new file mode 100644 index 0000000..c490589 --- /dev/null +++ b/component/pear/css/module/fullscreen.css @@ -0,0 +1,12 @@ +html:-moz-full-screen { + background: grey; +} +html:-webkit-full-screen { + background: grey; +} +html:fullscreen { + background: grey; +} +:not(:root):fullscreen::backdrop{ + background:whitesmoke; +} \ No newline at end of file diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css index 14efcc3..d3ed538 100644 --- a/component/pear/css/pear.css +++ b/component/pear/css/pear.css @@ -25,4 +25,5 @@ @import url("module/step.css"); @import url("module/card.css"); @import url("module/tab.css"); -@import url("module/tag.css"); \ No newline at end of file +@import url("module/tag.css"); +@import url("module/fullscreen.css"); \ No newline at end of file diff --git a/component/pear/module/admin.js b/component/pear/module/admin.js index 8f45be1..69770f7 100644 --- a/component/pear/module/admin.js +++ b/component/pear/module/admin.js @@ -1,4 +1,4 @@ -layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'frame', 'theme', 'convert'], +layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'frame', 'theme', 'convert','fullscreen'], function(exports) { "use strict"; @@ -11,7 +11,8 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm pearMenu = layui.menu, pearFrame = layui.frame, pearTheme = layui.theme, - message = layui.message; + message = layui.message, + fullscreen=layui.fullscreen; var bodyFrame; var sideMenu; @@ -87,7 +88,10 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm accordion: param.menu.accordion, url: param.menu.data, data: param.menu.data, - parseData: false, + parseData: function(data){ + data = data.data; + return data; + }, change: function() { compatible(); }, @@ -657,11 +661,11 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm body.on("click", ".fullScreen", function() { if ($(this).hasClass("layui-icon-screen-restore")) { - screenFun(2).then(function() { + fullscreen.fullClose().then(function() { $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); }); } else { - screenFun(1).then(function() { + fullscreen.fullScreen().then(function() { $(".fullScreen").eq(0).addClass("layui-icon-screen-restore"); }); } @@ -931,46 +935,6 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm } } - function screenFun(num) { - num = num || 1; - num = num * 1; - var docElm = document.documentElement; - switch (num) { - case 1: - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); - } - break; - case 2: - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - break; - } - return new Promise(function(res, rej) { - res("返回值"); - }); - } - - function isFullscreen() { - return document.fullscreenElement || - document.msFullscreenElement || - document.mozFullScreenElement || - document.webkitFullscreenElement || false; - } - function isControl(option) { if (option.theme.allowCustom) { if (localStorage.getItem("control") != null) { @@ -1008,13 +972,13 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm } window.onresize = function() { - if (!isFullscreen()) { + if (!fullscreen.isFullscreen()) { $(".fullScreen").eq(0).removeClass("layui-icon-screen-restore"); } } $(window).on('resize', debounce(function () { - if (!sideMenu.isCollapse && $(window).width() <= 768) { + if (sideMenu && !sideMenu.isCollapse && $(window).width() <= 768) { collapse(); } },50)); diff --git a/component/pear/module/fullscreen.js b/component/pear/module/fullscreen.js new file mode 100644 index 0000000..ebec40b --- /dev/null +++ b/component/pear/module/fullscreen.js @@ -0,0 +1,46 @@ +layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'frame', 'theme', 'convert'], + function(exports) { + "use strict"; + + var $ = layui.jquery; + var fullScreen = new function() { + this.fullScreen = function(dom){ + return new Promise(function(res, rej) { + var docElm = dom && document.querySelector(dom) || document.documentElement; + if (docElm.requestFullscreen) { + docElm.requestFullscreen(); + } else if (docElm.mozRequestFullScreen) { + docElm.mozRequestFullScreen(); + } else if (docElm.webkitRequestFullScreen) { + docElm.webkitRequestFullScreen(); + } else if (docElm.msRequestFullscreen) { + docElm.msRequestFullscreen(); + }else{ + rej(""); + } + res("返回值"); + }); + } + this.fullClose = function(){ + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitCancelFullScreen) { + document.webkitCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } + return new Promise(function(res, rej) { + res("返回值"); + }); + } + this.isFullscreen = function(){ + return document.fullscreenElement || + document.msFullscreenElement || + document.mozFullScreenElement || + document.webkitFullscreenElement || false; + } + }; + exports('fullscreen', fullScreen); + }) diff --git a/component/pear/module/tab.js b/component/pear/module/tab.js index 7efc730..4284f45 100644 --- a/component/pear/module/tab.js +++ b/component/pear/module/tab.js @@ -182,7 +182,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); tabData.push(opt); @@ -255,7 +255,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); if (time != false && time != 0) { @@ -276,7 +276,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); if (time != false && time != 0) { @@ -307,7 +307,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); if (time != false && time != 0) { @@ -342,7 +342,7 @@ layui.define(['jquery', 'element'], function(exports) { title: title, content: '', + opt.url + '" style="width:100%;height:100%;" allowfullscreen="true">', id: opt.id }); if (time != false && time != 0) { @@ -487,7 +487,7 @@ layui.define(['jquery', 'element'], function(exports) { content += '
' + '" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;" allowfullscreen="true">' } else { if (!option.preload) { item.url = "about:blank"; @@ -496,7 +496,7 @@ layui.define(['jquery', 'element'], function(exports) { content += '
' + '" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;" allowfullscreen="true">' } index++; }); diff --git a/component/pear/pear.js b/component/pear/pear.js index d6d215d..a4d910f 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -41,7 +41,8 @@ layui.config({ toast: "toast", // 消息通知 iconPicker: "iconPicker",// 图标选择 nprogress: "nprogress", // 进度过渡 - watermark:"watermark/watermark" //水印 + watermark:"watermark/watermark", //水印 + fullscreen:"fullscreen" //全屏组件 }).use(['layer', 'theme'], function () { layui.theme.changeTheme(window, false); }); \ No newline at end of file diff --git a/view/document/fullscreen.html b/view/document/fullscreen.html new file mode 100644 index 0000000..3f6d194 --- /dev/null +++ b/view/document/fullscreen.html @@ -0,0 +1,119 @@ + + + + + 全屏组件 + + + + +
+
+
+
开发环境
+
+ fullscreen 用于控制页面或元素全屏 +
+
+
+
+
+
+

显示代码

+
+ 
+								
+								 并
+								
+								 并
+								
+
+
+
+
+
+
+
+
全屏控制
+
+ + + +
+
+
+
+
+
+

显示代码

+
+ 
+								layui.use(['fullscreen'], function() {
+								    var fullscreen = layui.fullscreen;
+
+								    fullscreen.fullScreen();
+                                    fullscreen.fullClose();
+                                    fullscreen.fullScreen("#fulltarget");
+                                    fullscreen.isFullscreen();
+
+								})
+
+
+
+
+
+
+
+
指定容器全屏
+
+
+ + +
+
+
+
+
+ + + + + -- Gitee From a800238ca400f8e76ec86ceb81582e502ded347f Mon Sep 17 00:00:00 2001 From: chf <156704883@qq.com> Date: Fri, 22 Jul 2022 11:01:31 +0800 Subject: [PATCH 2/2] =?UTF-8?q?frame=20=E5=86=85=E6=B7=BB=E5=8A=A0=20allow?= =?UTF-8?q?fullscreen=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- component/pear/module/frame.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/component/pear/module/frame.js b/component/pear/module/frame.js index d9e60b0..3f5af19 100644 --- a/component/pear/module/frame.js +++ b/component/pear/module/frame.js @@ -45,7 +45,7 @@ layui.define(['jquery', 'element'], function (exports) { } function createFrameHTML(option) { - var iframe = ""; + var iframe = ""; var loading = '
' + '
' + '' + -- Gitee