效果图
环境
.NET 6
代码
_Layout.cshtml
<!--github仓库地址: https://github.com/fengyuanchen/viewerjs-->
<script src="https://cdn.jsdelivr.net/npm/viewerjs@1.10.4/dist/viewer.min.js"></script>
<!--自己的js代码-->
<script src="js/Init.js"></script>
Init.js
// Blaozr调用这个方法
function InitImg() {
console.log("执行 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")
}
// 初始化 Viewer
InitViewer()
}
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 != null) {
// console.log(viewerArr);
for (let item of viewerArr) {
item.destroy()
}
}
}
Content.razor
<div name="imgBox">
<!--自己的各种内容-->
</div>
Content.razor.cs
protected override async Task OnAfterRenderAsync(bool firstRender)
{
// 调用js中的方法
await _jsRuntime.InvokeVoidAsync("InitImg");
}
Github
https://github.com/xxxxue/BlazorJiangBlog