Blazor组件提交全记录:FullScreen全屏按钮/全屏服务(Bootst

介绍

是一个使用 .NET 生成交互式客户端 Web UI 的框架。它与前端同学所熟知的 Vue、React 有很大的不同。

它最大的特点是使用 C# 代码(理论上,.NET 生态系统中的任何语言)来实现逻辑。

使用 .NET 进行客户端 Web 开发具有以下优势:

有两种不同的开发模式

,C#代码在浏览器中运行。

,C#代码在服务器端执行,使用同步到浏览器进行更新。

涉及的技术

它是核心生态系统不可或缺的一部分,涉及的大部分技术都与.net相关。

视图层使用 Razor 3 技术进行前端编排和渲染。Razor 是一种标记语法,也是 core 的默认视图语法。最显着的特点是强类型(C#、VB等)的代码可以用HTML写在一个文件中,当然也可以分开。在 razor 文件中,@ 符号后面是强类型语言,它可以是一行、整行或段落的一部分。core中的一般做法是将VB、C#等强类型语言嵌入到网页中。当请求网页时,在服务器端执行嵌入代码以动态生成页面。

在开发模式下运行时,依靠4种技术,可以在没有任何后端服务器的情况下制作静态页面。

运行时就是这样开发的,依赖5种技术,需要后端服务器端配合。

样式化的 UI 组件库 –

它基于样式库精心打造,添加了100多个常用组件,为您快速开发项目带来非凡感受。

.()

参考

.() 方法用于发出异步请求以将元素置于全屏模式。

调用此 API 并不能保证元素能够进入全屏模式。如果允许元素进入全屏模式,它将返回并且元素将收到一个 (en-US) 事件,通知它已进入全屏模式。如果全屏请求被拒绝,将返回并且元素将收到 (en-US) 事件。如果元素已从原始文档中分离,则文档将接收这些事件。

早期的 API 实现将始终将这些事件发送到,而不是调用元素,因此您可能需要自己处理此类情况。在 [Page not yet] 中查看哪些浏览器进行了此更改。

注意:该方法只能在用户交互或设备方向改变时调用,否则会失败。

语法

var = .();

范围

可选的

(en-US) 对象提供用于切换到全屏模式的控制选项。目前,唯一的选项是 (en-US),它控制元素处于全屏模式时是否显示导航栏 UI。默认值为“auto”,这意味着将由浏览器显示导航栏。

返回值

切换到全屏模式后返回已使用的值

异常

() 通过拒绝返回的内容来生成错误条件,而不是抛出传统的异常。拒绝控制器接收以下值之一:

在以下情况下抛出:

文档中包含的元素没有完全激活,也就是说,它不是当前激活的元素。

元素不在文档中。

不允许该元素使用“”功能,因为功能策略限制了配置或其他访问控制。

一个元素和它的文档是同一个节点。

初步构建组件 1. 构建 js 脚本

        bb_Fullscreen: function (ele) {
            ele.requestFullscreen() ||
                ele.webkitRequestFullscreen ||
                ele.mozRequestFullScreen ||
                ele.msRequestFullscreen;
        },
        bb_ExitFullscreen: function () {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
    });

2.构建 Razor 页面测试

下面是简化代码,运行测试看看功能是否满足要求。



@code{
[Inject] IJSRuntime? JSRuntime{ get; set; }
  //进入全屏
  private Task FullScreen() => await JSRuntime.InvokeVoidAsync("bb_Fullscreen");
  //退出全屏
  private Task ExitFullScreen() => await JSRuntime.InvokeVoidAsync("bb_ExitFullscreen");
}

3.优化逻辑,增加单键全屏切换逻辑,增加单个元素全屏逻辑

JS完整代码

(function ($) {
    $.extend({
        bb_toggleFullscreen: function (el, id) {
            var ele = el;
            if (!ele || ele === '') {
                if (id) {
                    ele = document.getElementById(id);
                }
                else {
                    ele = document.documentElement;
                }
            }
            if ($.bb_IsFullscreen()) {
                $.bb_ExitFullscreen();
                ele.classList.remove('fs-open');
            }
            else {
                $.bb_Fullscreen(ele);
                ele.classList.add('fs-open');
            }
        },
        bb_Fullscreen: function (ele) {
            ele.requestFullscreen() ||
                ele.webkitRequestFullscreen ||
                ele.mozRequestFullScreen ||
                ele.msRequestFullscreen;
        },
        bb_ExitFullscreen: function () {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        },
        bb_IsFullscreen: function () {
            return document.fullscreen ||
                document.webkitIsFullScreen ||
                document.webkitFullScreen ||
                document.mozFullScreen ||
                document.msFullScreent;
        }
    });
})(jQuery);

测试功能


@code{
[Inject] IJSRuntime? JSRuntime{ get; set; }
  //全屏方法,已经全屏时再次调用后退出全屏
  private Task ToggleFullScreen() => await JSRuntime.InvokeVoidAsync("bb_toggleFullscreen");
}

4.包即服务

再想想,如果把按钮封装成组件,只能调用UI界面,样式也不是最灵活的,为什么不做一个服务,和UI解耦呢?别着急,现在就开始吧。

作为一个爱好者,每一个想法都转化为一个组件之后,值得提交到这样一个组件库,供大家一起学习和进步。自从我在2020-09-25向团队提交组件以来,从自愈到团队合作,真的学到了很多知识和技能。在学习BB源码的过程中,我深刻体会到了这句话的精髓:“你进入的每一寸都是一寸惊喜!”。

项目负责人Argo,作为微软MVP和业内人士,对整个微软技术栈有非常深刻的理解和思考,对我帮助很大。我要在这里感谢Argo,

分类:

技术要点:

相关文章:

© 版权声明
THE END
喜欢就支持一下吧
点赞12赞赏 分享
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容