.NET C# Blazor 使用Viewer.js完成图片的大图查看

.NET 6

通过CDN引入插件

编写js代码

我使用的 BootstrapBlazor 模版，有多页签(tabs)的功能，实现原理是 display: none，
dom中会同时存在所有页面的内容和图片，
也会同时存在多个div id = "imgBox"的dom，众所周知，id是不能重复的,
无法获取到第二个页面的div，新页面中的图片也就没有效果了，
所以不能用id去获取dom, 改用 name，获取后遍历一下，添加一个属性,去判断是否处理过了，
不让程序无意义的重复处理，让程序更牛逼一些，
…
如果是 Razor Page 或者 MVC，这种跳转页面每次都从服务端拿页面，
整个Dom中只存在一个页面的dom内容，
可以在JS页面加载完成事件中调用初始化，
div用 id = "imgBox"，JS 一行代码即可 new Viewer(document.getElementById('imgBox'));
…
在React这种框架中会用到destroy

// Blaozr调用这个方法
function Init()
{
	// 初始化图片,根据自己的需求添加
    InitImg();
    
    // !!本文的核心方法!!
    InitViewer();
}

function InitImg() {   

    //修改图片宽高和居中
    let imgList = document.querySelectorAll("img");

    let attrName = "img-init";

    console.log("图片数量:" + imgList.length);

    for (let item of imgList) {

        if (item.getAttribute(attrName) == "true") {
            // console.log("img标签已经初始化,跳过")
            continue;
        }
        item.style.width = "200px";
        item.style.height = "100px";
        item.parentElement.style.textAlign = "center";

        // 处理过后,添加属性,下次直接跳过
        item.setAttribute(attrName, "true")
    }
}

let viewerArr = [];

function InitViewer() {
    // 获取所有 name="imgBox" 的dom
    let domList = document.getElementsByName('imgBox')

    let attrName = "viewer-init";

    for (let item of domList) {
        
        // 获取dom标签的属性
        if (item.getAttribute(attrName) == "true") {
            // console.log("imgBox标签已经初始化,跳过")
            continue;
        }

        // 初始化 Viewer
        viewerArr.push(new Viewer(item));

        // 处理过后,添加属性,下次直接跳过
        item.setAttribute(attrName, "true")
    }
}

// 销毁所有 Viewer 对象  (Blaozr暂时没发现destroy的应用场景，在React这种框架中会用到destroy)
function DestoryViewer() {
    if (viewerArr.length > 0) {
        // console.log(viewerArr);
        for (let item of viewerArr) {
            item.destroy()
        }
    }
}

给包裹内容的div加上 name = “imgBox”

[Inject]
private IJSRuntime _jsRuntime { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	// 调用js中的方法                
    await _jsRuntime.InvokeVoidAsync("Init");
}

https://github.com/xxxxue/BlazorJiangBlog