基于 abp vNext 和 .NET Core 开发博客项目

上一篇搭建了 Blazor 项目并将整体框架改造了一下，本篇将完成用 C# 代码代替 JavaScript 实现几个小功能，说是代替但并不能完全不用 JavaScript，应该说是尽量不用吧。

二维码显示与隐藏

可以看到，当我鼠标移入的时候显示二维码，移出的时候隐藏二维码。

这个功能如果是用JavaScript来完成的话，肯定首先想到的是HTML的 Mouse 事件属性，那么在Blazor中也是一样的，给我们实现了各种on*事件。

打开index.razor页面，给微信图标那个 NavLink 标签添加两个事件，@onmouseover和@onmouseout。

...<NavLink class="link-item weixin" title="扫码关注微信公众号：『阿星Plus』查看更多。" @onmouseover="Hover" @onmouseout="Hover">    <i class="iconfont iconweixin"></i></NavLink>...

当鼠标移入移出的时候都执行我们自定义的一个方法Hover()。

C# 代码写在@code{}花括号中，实现显示和隐藏原理是利用css，默认是隐藏的，当显示的时候将具有隐藏属性的class值去掉就可以了。

所以，可以添加两个字段，一个用于判断当前是否处于隐藏状态，一个用来存储class的值。

/// <summary>/// 是否隐藏/// </summary>private bool IsHidden = true;/// <summary>/// 二维码CSS/// </summary>private string QrCodeCssClass => IsHidden ? "hidden" : null;

当IsHidden = true，QrCodeCssClass = "hidden"，当IsHidden = false，QrCodeCssClass = null。

那么在Hover()方法中，不断修改IsHidden的值就可以实现效果了。

/// <summary>/// 鼠标移入移出操作/// </summary>private void Hover() => IsHidden = !IsHidden;

最后将QrCodeCssClass变量赋值给二维码图片所在的div上。

...<div class="qrcode @QrCodeCssClass">    <img src="https://static.meowv.com/images/wx_qrcode.jpg" /></div>...

大功告成，index.razor完整代码如下：

@page "/"<div class="main">    <div class="container">        <div class="intro">            <div class="avatar">                <a href="javascript:;"><img src="https://static.meowv.com/images/avatar.jpg"></a>            </div>            <div class="nickname">阿星Plus</div>            <div class="description">                <p>                    生命不息，奋斗不止                    <br>Cease to struggle and you cease to live                </p>            </div>            <div class="links">                <NavLink class="link-item" title="Posts" href="posts">                    <i class="iconfont iconread"></i>                </NavLink>                <NavLink target="_blank" class="link-item" title="Notes" href="https://notes.meowv.com/">                    <i class="iconfont iconnotes"></i>                </NavLink>                <NavLink target="_blank" class="link-item" title="API" href="https://api.meowv.com/">                    <i class="iconfont iconapi"></i>                </NavLink>                <NavLink class="link-item" title="Manage" href="/account/auth">                    <i class="iconfont iconcode"></i>                </NavLink>                <NavLink target="_blank" class="link-item" title="Github" href="https://github.com/Meowv/">                    <i class="iconfont icongithub"></i>                </NavLink>                <NavLink class="link-item weixin" title="扫码关注微信公众号：『阿星Plus』查看更多。" @onmouseover="Hover" @onmouseout="Hover">                    <i class="iconfont iconweixin"></i>                </NavLink>                <div class="qrcode @QrCodeCssClass">                    <img src="https://static.meowv.com/images/wx_qrcode.jpg" />                </div>            </div>        </div>    </div></div>@code {    /// <summary>    /// 是否隐藏    /// </summary>    private bool IsHidden = true;    /// <summary>    /// 二维码CSS    /// </summary>    private string QrCodeCssClass => IsHidden ? "hidden" : null;    /// <summary>    /// 鼠标移入移出操作    /// </summary>    private void Hover() => IsHidden = !IsHidden;}

菜单显示与隐藏

菜单是在小屏幕上才会出现的，相信看完了二维码的显示与隐藏，这个菜单的显示与隐藏就好办了吧，实现方法是一样的，菜单按钮是在头部组件Header.razor中的，包括主题切换功能，所以下面代码都在Header.razor里面。

@code {    /// <summary>    /// 下拉菜单是否打开    /// </summary>    private bool collapseNavMenu = false;    /// <summary>    /// 导航菜单CSS    /// </summary>    private string NavMenuCssClass => collapseNavMenu ? "active" : null;    /// <summary>    /// 显示/隐藏 菜单    /// </summary>    private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu;}

默认是不打开的，collapseNavMenu = false。然后根据collapseNavMenu值为NavMenuCssClass给定不同的class。

...<nav class="navbar-mobile">    <div class="container">        <div class="navbar-header">             <div>                <NavLink class="menu-item" href="" Match="NavLinkMatch.All">

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。