基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（二）

2024-04-12 18:37:32

系列文章

上一篇搭建了 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">

码农公寓

系列文章

二维码显示与隐藏

菜单显示与隐藏

相关文章